style.css

@-moz-document regexp("https?://trakt.tv/.*") {
/* ++----------------------------------------------------------------------------------++ */
/* ||                                                                                  || */
/* ||* Name        : Trakt Dark                                                        || */
/* ||                                                                                  || */
/* ||* Author      : JourneyOver                                                       || */
/* ||                                                                                  || */
/* ||* Created     : 03 / 17 / 2016                                                    || */
/* ||                                                                                  || */
/* ||* Updated     : 00 / 00 / 201X                                                    || */
/* ||                                                                                  || */
/* ||* Version     : 3.0.0                                                             || */
/* ||                                                                                  || */
/* ||* Copyright   : 2016-2018                                                         || */
/* ||                                                                                  || */
/* ++----------------------------------------------------------------------------------++ */
}

@-moz-document regexp("https?://trakt.tv/.*") {
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::: SETTINGS :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

:root {
  /* Main */
  --bg: #1d1e22 !important; /* var(--bg) */
  --altbg: #2c2c33 !important; /* var(--altbg) */
  --altbg-2: #1b1b1e !important; /* var(--altbg-2) */
  --border: #000102 !important; /* var(--border) */
  --transparent: rgba(29, 30, 34, .65) !important; /* var(--transparent) */
  --transparent2: rgba(0, 0, 0, .75) !important; /* var(--transparent2) */
  --transparent3: rgba(0, 0, 0, .5) !important; /* var(--transparent3) */
  --transparent4: rgba(0, 0, 0, .10) !important; /* var(--transparent4) */

  /* Various Other Colors */
  --color-grey: #3A3A3A !important; /* var(--color-grey) */
  --color-lgrey: #ebebeb !important; /* var(--color-lgrey) */
  --color-rlgrey: #888 !important; /* var(--color-rlgrey) */
  --color-white: #FFF !important; /* var(--color-white) */
  --color-red: #ED1C24 !important; /* var(--color-red) */
  --color-dkeppel: #16a085 !important; /* var(--color-dkeppel) */
  --color-blue: #009edf !important; /* var(--color-blue) */
  --color-black: #000 !important; /* var(--color-black) */
  --color-purple: #8e44ad !important; /* var(--color-purple) */
  --color-lbgrey: #6e7a83 !important; /* var(--color-lbgrey) */

  /* Scroll Bar colors */
  --scrollbar-color: #333 !important; /* var(--scrollbar-color) */
  --scrollbart-color: #555 !important; /* var(--scrollbart-color) */
}
}

@-moz-document regexp("https?://trakt.tv/.*") {
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Main Globals :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*::: Thinner/Darker Scroll bar :::*/
::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-color) !important;
}

::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  background-color: var(--scrollbar-color) !important;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 2px !important;
  border-radius: 2px !important;
  background: var(--scrollbart-color) !important;
}

/*::: Trakt Dark Version :::*/
[class="trakt"]::after {
  white-space: pre !important;
  content: "\A                Trakt Dark Ver. 3.0.0" !important;
}

/*[[Ads]]*/

/*[[Shop]]*/

/*[[VIP]]*/
}

@-moz-document regexp("https?://trakt.tv/auth/.*") {
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::: JOIN & SIGN IN Page :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*::: backgrounds & texts :::*/
#auth-form-wrapper,
#auth-form-wrapper .auth-services-wrapper,
#auth-form-wrapper .bottom-wrapper {
  border-top: 0 !important;
  border-radius: 1px !important;
  color: var(--color-rlgrey) !important;
  background-color: var(--bg) !important;
}

/*::: inputs :::*/
input#user_email.string.email.required.top.form-control,
input#user_login.string.required.top.form-control,
input#user_password.password.required.bottom.form-control,
input#user_password.password.required.middle.form-control,
input#user_password_confirmation.password.required.bottom.form-control,
input#user_username.string.required.middle.form-control {
  border: 1px solid var(--border) !important;
  color: var(--color-rlgrey) !important;
  background-color: var(--altbg) !important;
}

.form-control:focus {
  border-color: var(--color-rlgrey) !important;
  outline: 0 !important;
  box-shadow: 0 0 4px 1px var(--color-red) !important;
}

:focus {
  outline: 0 !important;
}

/*::: Logo :::*/
#auth-form-wrapper .logo-wrapper .logo {
  background: url("https://raw.githubusercontent.com/StylusThemes/Trakt-Dark/master/images/logos/dark_logo_(1000x1000).png") no-repeat !important;
  background-size: 128px 128px !important;
}
}

@-moz-document regexp("https?://trakt.tv/welcome/.*") {
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Welcome Page :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*::: Avatar Image :::*/
body.welcome #avatar-wrapper img.avatar,
body.welcome #avatar-wrapper .dropzone {
  border: 2px solid var(--border) !important;
  border-radius: 0 !important;
}

/*::: Text Forms & Dropdown Menu :::*/
body.welcome .form-inputs,
body.welcome .form-inputs .form-control,
body.welcome .form-inputs input[type=text] {
  border: 0 !important;
  color: var(--color-lgrey) !important;
  background-color: var(--bg) !important;
}

/*::: Buttons :::*/
body.welcome .genres .genre.enabled .inner,
body.welcome .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {
  border: 1px solid var(--border) !important;
  color: var(--color-rlgrey) !important;
  background: var(--altbg) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

body.welcome .genres .genre.enabled .inner:hover,
body.welcome .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button:hover {
  color: var(--color-lgrey) !important;
  background: var(--altbg-2) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

/*::: welcome/3 popup info :::*/
body.welcome .shepherd-element.shepherd-theme-arrows .shepherd-content {
  color: var(--color-lgrey) !important;
  background-color: var(--bg) !important;
}

/*::: View more tv shows/movies hover :::*/
body.welcome .view-more:hover {
  border: var(--border) !important;
  color: var(--color-lgrey) !important;
  background: var(--altbg-2) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}
}

@-moz-document regexp("https?://trakt.tv/.*") {
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Globals :::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*::: Header Search :::*/
#header-search,
header#top-nav #header-search #header-search-button.btn-primary {
  border: 1px solid var(--border) !important;
  color: var(--color-lgrey) !important;
  background: var(--bg) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

#header-search:hover,
header#top-nav #header-search #header-search-button.btn-primary:hover {
  border: 1px solid var(--border) !important;
  color: var(--color-lgrey) !important;
  background: var(--transparent3) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

header#top-nav #header-search #header-search-query.open {
  color: var(--color-rlgrey) !important;
  background: transparent !important;
}

header#top-nav #header-search #header-search-query {
  background: transparent;
}

header#top-nav #header-search #header-search-type.shown .dropdown-toggle {
  border-left: transparent !important;
  color: var(--color-rlgrey) !important;
  background: transparent !important;
}

header#top-nav #header-search #header-search-type.shown .dropdown-menu {
  background: var(--bg) !important;
}

header#top-nav #header-search #header-search-type a {
  color: var(--color-rlgrey) !important;
  background: var(--bg) !important;
  cursor: pointer !important;
}

header#top-nav #header-search #header-search-type a:hover {
  color: var(--color-red) !important;
  background: var(--bg) !important;
}

/*::: Navigation Menu :::*/
#user-menu,
.no-touch header#top-nav,
.no-touch header#top-nav:hover {
  background: var(--transparent) !important;
}

/*::: Navigation AVA :::*/
header#top-nav .navbar-nav.navbar-right .btn .avatar {
  border-radius: 0 !important;
}

/*::: Alert & Toast :::*/
#toast-container.toast-top-full-width .toast.toast-success,
.alert {
  border: 1px solid var(--color-black) !important;
  color: var(--color-rlgrey) !important;
  background-color: transparent !important;
}

/*::: Logo IMG :::*/
#top-brand img,
.trakt-full img {
  visibility: hidden !important;
}

#top-brand {
  width: 65px !important;
  height: 65px !important;
  background: url("https://raw.githubusercontent.com/StylusThemes/Trakt-Dark/master/images/logos/grey_logo_(65x65).png") no-repeat !important;
}

.trakt-full {
  border-bottom: none !important;
  height: 65px !important;
  background: url("https://raw.githubusercontent.com/StylusThemes/Trakt-Dark/master/images/logos/light_grey_logo_(65x65)") no-repeat !important;
}

header#top-nav #top-brand .bottom-wrapper .bottom,
.no-touch header#top-nav:hover #top-brand .bottom-wrapper .bottom {
  background: none !important;
}

header#top-nav #top-brand .bottom-wrapper {
  overflow: hidden !important;
  position: static !important;
  bottom: 0 !important;
  z-index: -1 !important;
  width: 65px !important;
  height: 1px !important;
}

/*::: Buttons :::*/
.btn-primary {
  border: 1px solid var(--border) !important;
  color: var(--color-rlgrey) !important;
  background: var(--altbg) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

.btn-primary:hover {
  color: var(--color-lgrey) !important;
  background: var(--altbg-2) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

/*::: Social Buttons :::*/
[class*="btn-twitter"],
[class*="btn-facebook"],
[class*="btn-google"],
[class*="btn-tumblr"],
[class*="btn-medium"],
[class*="btn-chrome"],
[class*="btn-slack"],
[class*="btn-pushover"],
[class*="btn-pushbullet"],
#auth-form-wrapper .auth-services .btn.btn-google {
  border: 1px solid var(--border) !important;
  color: var(--color-rlgrey) !important;
  background: var(--altbg) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

[class*="btn-twitter"]:hover,
[class*="btn-facebook"]:hover,
[class*="btn-google"]:hover,
[class*="btn-tumblr"]:hover,
[class*="btn-medium"]:hover,
[class*="btn-chrome"]:hover,
[class*="btn-slack"]:hover,
[class*="btn-pushover"]:hover,
[class*="btn-pushbullet"]:hover,
#auth-form-wrapper .auth-services .btn.btn-google:hover {
  color: var(--color-lgrey) !important;
  background: var(--altbg-2) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

/*::: Remove Shade :::*/
#watchnow-wrapper .shade,
#api-wrapper .shade {
  display: none !important;
}

.custom-list .list-info .info .overview[data-readmore][aria-expanded="false"] .shade,
.subnav-text .text[data-readmore][aria-expanded="false"] .shade {
  width: 0 !important;
}

/*::: HP Scrobble & sync
from your media center. :::*/
#scrobblers-wrapper {
  height: 0 !important;
}

#watching-wrapper .works-with {
  margin-bottom: 40px !important;
}

#scrobblers-wrapper .buttons .btn {
  margin-top: -860px !important;
  margin-left: 83% !important;
}

/*::: API Wrapper Top Border :::*/
#api-wrapper {
  border-top: none !important;
}

/*::: Fix size of map-wrapper :::*/
#map-wrapper .container,
#map-wrapper .full-screenshot,
body.main.index #map-wrapper .full-screenshot {
  background-size: 100% 100% !important;
}

/*::: Main Background :::*/
section:not([id*=bottom-stats-wrapper]):not([id*=auth-bg-wrapper]) {
  color: var(--color-lgrey) !important;
  background: var(--bg) !important;
}

#main-search,
footer {
  background: var(--bg) !important;
}

#main-search .inner {
  background: none !important;
}

#main-search input.footer-search {
  border: 1px solid var(--border) !important;
  color: var(--color-rlgrey) !important;
  background: transparent !important;
}

/*::: watchlist/collections/watch Dropdown Menu :::*/
.quick-icons .actions .popover .popover-title {
  color: var(--color-lgrey) !important;
}

.popover.remove .popover-content,
.popover.with-list .popover-content {
  background-color: var(--bg) !important;
}

.popover-title,
.popover.remove .popover-title {
  border-bottom: 1px solid var(--border) !important;
  color: var(--color-lgrey) !important;
  background-color: var(--altbg) !important;
}

ul.lists li {
  color: var(--color-rlgrey) !important;
}

ul.lists li.selected {
  color: var(--color-lbgrey) !important;
}

.popover.remove .popover-content > button,
.popover.remove .popover-content > button.btn-cancel {
  border: 1px solid var(--border) !important;
  color: var(--color-rlgrey) !important;
  background: var(--bg) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

.popover.remove .popover-content > button.btn-cancel:hover,
.popover.remove .popover-content > button:hover {
  border: 1px solid var(--border) !important;
  color: var(--color-lgrey) !important;
  background: var(--transparent3) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

/*::: Add To Collection *Metadata*  :::*/
.popover .metadata-wrapper {
  background-color: var(--bg) !important;
}

.popover i.add-metadata {
  color: var(--color-lbgrey) !important;
}

/*::: Add To Collection/watched *Other Date*  :::*/
.popover .data-wrapper input {
  color: var(--color-white) !important;
  background: var(--bg) !important;
}

.popover .data-wrapper {
  background-color: var(--altbg) !important;
}

.popover .data-wrapper .xdsoft_datetimepicker.xdsoft_inline {
  border-top: 1px solid var(--border) !important;
  background-color: var(--altbg) !important;
}

.popover .data-wrapper .xdsoft_datetimepicker.xdsoft_inline button {
  opacity: 1 !important;
}

.popover .data-wrapper .xdsoft_datetimepicker.xdsoft_inline .xdsoft_month,
.popover .data-wrapper .xdsoft_datetimepicker.xdsoft_inline .xdsoft_year {
  color: var(--color-white) !important;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
  background: var(--altbg) !important;
}

.generic-datepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  background: var(--bg) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  font-size: 13px !important;
  color: var(--color-white) !important;
  background: var(--altbg) !important;
}

/*::: Avatars on various pages  :::*/
.user-avatar img {
  display: block !important;
  margin-left: 5px !important;
  border: solid 1px var(--border) !important;
  border-radius: 0 !important;
  background-color: var(--bg) !important;
}

.user-avatar .corner-rating {
  right: -5px !important;
}

.comment-wrapper .above-comment .user-avatar .corner-rating .text {
  right: -17px !important;
}

/*::: Fanart/Poster images  :::*/
.fanart:not([id*=comment-fanart]) {
  visibility: hidden !important;
}

.fanart .real,
.fanart .shadow-base,
.fanart .titles,
.poster .real,
.poster-wrapper .poster,
.posters .poster-items-wrapper {
  visibility: visible !important;
}

.poster {
  visibility: hidden !important;
}

.posters .poster {
  border: hidden !important;
}

/*::: Show Ratings on Posters :::*/
.corner-rating {
  visibility: visible !important;
}

/*::: Quick Icons :::*/
.titles-link h3,
.titles-link h4,
h4 .titles-link {
  color: var(--color-lgrey) !important;
}

.quick-icons {
  border: 0 !important;
  background-color: var(--altbg-2) !important;
}

.quick-icons .actions a.collect.selected,
.quick-icons .actions a.collect:hover,
.quick-icons .actions a.list.selected,
.quick-icons .actions a.list:hover,
.quick-icons .actions a.watch.selected,
.quick-icons .actions a.watch:hover {
  color: var(--color-white) !important;
}

/*::: Progress Bars :::*/
.progress {
  background: #3c0101 !important;
}

.progress-bar {
  background: #6b0000 !important;
}

/*::: Divider/Eye/Cal/Rss/CSV icons + See more text :::*/
.feed-icons .feed-icon:hover,
.filter-dropdown .hide-dividers .icon:hover,
.see-more:hover {
  color: var(--color-white) !important;
}

.feed-icons .feed-icon,
.filter-dropdown .dropdown-toggle,
.filter-dropdown .hide-dividers .icon,
.see-more,
.subnav-wrapper .right .feed-icon .icon {
  color: var(--color-rlgrey) !important;
}

.filter-dropdown .selected .caret,
.filter-dropdown .selected .icon,
.filter-dropdown.selected .caret,
.filter-dropdown.selected .icon {
  color: var(--color-white) !important;
}

.filter-dropdown .icon .line {
  background: var(--color-white) !important;
}

.filter-dropdown .dropdown-toggle:hover,
.subnav-wrapper .right .feed-icon .icon:hover {
  color: var(--color-white) !important;
}

/*::: Profile :::*/

/*[[Pheader]]*/

#cover-wrapper .shadow {
  display: none !important;
}

#cover-wrapper #avatar-wrapper .avatar {
  border: 0 !important;
  border-radius: 1% !important;
  background-color: transparent !important;
}

#cover-wrapper #backdrop-info a,
#cover-wrapper #backdrop-info a .year {
  color: var(--color-white) !important;
}

/*::: Links Wrapper :::*/
#links-wrapper {
  background: var(--transparent) !important;
}

/*::: All Types/All Ratings/Recently Rated/Watched,
  Recently Watched/Recently Collected/Personal Lists,
  Rank/Comments/Recently Added dropdowns/Friends :::*/
.btn-default {
  border: 1px solid var(--border) !important;
  color: var(--color-grey) !important;
  background: var(--transparent3) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

.dropdown .btn-default {
  border: 1px solid var(--border) !important;
  color: var(--color-white) !important;
  background: var(--bg) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

.btn-default.active,
.btn-default:active,
.btn-default:focus,
.dropdown .btn-default:hover,
.open > .btn-default.dropdown-toggle {
  border: 1px solid var(--border) !important;
  color: var(--color-lgrey) !important;
  background: var(--transparent3) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

.dropdown-menu,
.dropdown-menu > li > a {
  color: var(--color-lgrey) !important;
  background: var(--bg) !important;
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
  color: var(--color-white) !important;
  background: var(--color-grey) !important;
}

/*::: Items/Plays/Watched/TLTW/Shows/lists/comments/People Count :::*/
.above-comment {
  background-color: transparent !important;
}

.comment-wrapper {
  border-width: 0 !important;
  background-color: transparent !important;
}

.new-comment-wrapper textarea {
  background-color: rgb(42, 44, 49) !important;
}

.new-comment-wrapper .formatting-help {
  background-color: transparent !important;
}

#main-comment .interactions,
.comment-wrapper .interactions {
  font-size: 13px !important;
}

.comment-wrapper.wider .above-comment .interactions a {
  margin: 15px !important;
  color: var(--color-lgrey);
}

/*::: Page numbers :::*/
.pagination li a {
  color: var(--color-rlgrey) !important;
  background-color: transparent !important;
}

.pagination li a:hover {
  color: var(--color-lgrey) !important;
  background-color: transparent !important;
}

/*::: Comments :::*/

/*::: Thumbs Up Button :::*/
.comment-wrapper .above-comment .selected {
  color: var(--color-rlgrey) !important;
}

/*::: Date and Time :::*/
.comment-wrapper .above-comment .date {
  font-family: "Proxima Nova" !important;
  color: var(--color-white) !important;
}

/*::: Add Comment :::*/
.new-comment-focus.main {
  font-size: 13px !important;
  color: var(--color-rlgrey) !important;
}

.new-comment-focus.main:hover {
  font-size: 13px !important;
  color: var(--color-white) !important;
}

/*::: reply Box :::*/
.new-reply-wrapper .reply-field textarea {
  border: solid 1px var(--border) !important;
  background-color: var(--bg) !important;
}

.new-reply-wrapper .buttons .comment-submit {
  border: 1px solid var(--border) !important;
  color: var(--color-lgrey) !important;
  background: var(--bg) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

.new-reply-wrapper .buttons .comment-submit:active,
.new-reply-wrapper .buttons .comment-submit:hover {
  border: 1px solid var(--border) !important;
  color: var(--color-white) !important;
  background: var(--transparent3) !important;
  box-shadow: 1px 1px 5px 1px var(--transparent2) !important;
}

/*::: highlight/code :::*/
.comment-wrapper .comment mark {
  border: 1px solid var(--color-black) !important;
  color: var(--color-black);
}

.comment-wrapper .comment code {
  border: 1px solid var(--color-black) !important;
  background-color: var(--bg);
}
}