Sonarr v3 Dark - Stylish template

                Never    
CSS
        
Download Raw Clone Report Copy 
/*  Darkerr 2.0 by Felix
        2.6 (23/05/2018) - Fix, adjustment
        2.5 (30/03/2018) - Color adjustment, improvements with Radarr, various fixes 
        2.3 (07/06/2017) - Fix
        2.2 (24/05/2017) - Fix buttons in search view
        2.1 (22/05/2017) - Search bar is always visible now
        2.0 (21/05/2017) - Rewritten, color adjustment, various fix
        1.4 (19/05/2017) - Fix regular expression
        1.3 (18/05/2017) - Fix "Discover new movies" view on Radarr
        1.2 (18/05/2017) - Color adjustment
        1.1 (18/05/2017) - Fix series and movies detailed view
        1.0 (17/05/2017) - First release
*/

/*-------------------------------------------*/

/* My stuff - Works with v3.0.1.482 */

.DayOfWeek-dayOfWeek-1iw4D {
    border: 1px solid var(--color-GWhite);
    background-color: var(--color-DarkBG);
    color: var(--color-GWhite);
}

.CalendarDay-isToday-1rFJO {
    background-color: var(--color-LGBlue);
    color: var(--color-White);
}

.CalendarEvent-seriesTitle-3sg1o {
    font-weight: bold;
    color: var(--color-White);
}

.CalendarEventGroup-seriesTitle-ThqKe {
    font-weight: bold;
    color: var(--color-White);
}

.Settings-link-tvjY0 {
    border-bottom: 1px solid var(--color-GWhite);
    color: var(--color-GWhite);
}

.PageHeader-header-1IhlM {
    background-color: var(--color-DarkBG);
    color: var(--color-GWhite);
}

.SeriesDetailsSeason-season-3XIYa {
    border: 1px solid var(--color-Grey);
    background-color: var(--color-DarkBG);
}

.SeriesDetailsSeason-collapseButtonContainer-trs6s {
    border-top: 1px solid var(--color-Grey);
    background-color: var(--color-DarkBG);
}

.ModalContent-modalContent--txrl {
    background-color: var(--color-Grey);
}

.TableOptionsColumn-column-2H7ic {
    background: var(--color-DGBlue);
}

.VirtualTableHeaderCell-headerCell-2c0Et {
    padding: 8px;
    border-top: 1px solid #eee !important;
    line-height: 1.52857143;
}

.TableRowCell-cell-2fbg4 {
    padding: 8px;
    border-top: 1px solid #eee;
    line-height: 1.52857143;
}

.AddNewSeriesSearchResult-searchResult-xR8dj {
    background-color: var(--color-DGBlue);
}

.EnhancedSelectInputOption-isSelected-1mRo2 {
    background-color: var(--color-Grey);
}

/*-------------------------------------------*/
/* Felix stuff - Untouched except for some colors */

/* COLORS */

:root {
    --color-Black: #000000;
    --color-DarkBG: #272727;
    --color-Grey: #444444;
    --color-GWhite: #D4D4D4;
    --color-White: #FFFFFF;

    --color-DGBlue: #3a3f51;  
    --color-LGBlue: #4f566f;  
}

/* VERSION */

#footer-region::after {
    content: "\A Darkerr Ver. 2.6";
    white-space: pre;
}

/* SCROLLBARS */

::-webkit-scrollbar-corner {
    background-color: #333333;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #555555;
}

/* SEARCH */

.col-md-6.form-control.x-series-search.tt-hint,
.col-md-6.form-control.x-series-search.tt-input {
    background-color: #333333 !important;
    color: var(--color-GWhite) !important;
    border: none;
    box-shadow: none;
}

.col-md-6.form-control.x-series-search::-webkit-input-placeholder {
    color: var(--color-GWhite);
}

.tt-suggestion.tt-cursor {
    background-color: var(--color-GWhite) !important;
    color: var(--color-Grey) !important;
}

.no-movies-found .tt-suggestion.tt-cursor {
    background-color: #333333 !important;
    color: var(--color-GWhite) !important;
}

/*-------------------------------------------*/

/* BACKGROUNDS */

body {
    background: var(--color-DarkBG);
    background-color: var(--color-DarkBG);
    color: var(--color-GWhite);
}

.started #page {
    background-color: transparent;
    color: var(--color-GWhite);
    box-shadow: none;
    max-width: 1210px;
}

.modal-content {
    background-color: var(--color-DarkBG);
}

.modal-header {
    border-bottom: 1px solid var(--color-Grey);
}

.modal-footer {
    border-top: 1px solid var(--color-Grey);
}

/* details */

.backdrop .navbar-nzbdrone,
.series-page-header,
.movie-page-header,
.series-season,
.movie-tabs-card {
    opacity: 0.98;
    background-color: var(--color-DarkBG);
    color: var(--color-GWhite);
    box-shadow: none;
}

/* popover */

.popover.in {
    opacity: .9;
}

.popover {
    background-color: #000;
    color: #fff;
}

.popover > .popover-title {
    background-color: #000;
    color: #fff;
    border: none;
}

.popover.left > .arrow,
.popover.left > .arrow:after {
    border-left-color: #000;
}

.popover.right > .arrow:after {
    border-right-color: #000;
}

/*-------------------------------------------*/

/* HOME */

/* posters */

.series-posters .series-posters-item,
.series-posters .movie-posters-item {
    background-color: transparent;
    box-shadow: none;
}

.series-posters .series-poster-container .series-controls,
.series-posters .series-poster-container .hidden-title,
.series-posters .movie-poster-container .movie-controls,
.series-posters .movie-poster-container .hidden-title {
    background-color: var(--color-DarkBG);
    color: var(--color-GWhite);
    opacity: .9;
}

.series-posters .series-poster-container .ended-banner,
.series-posters .movie-poster-container .cinemas-banner,
.series-posters .movie-poster-container .announced-banner {
    color: var(--color-GWhite);
    box-shadow: none;
    opacity: .9;
}

/* overview list */

.series-item > div.row > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > a > h2,
.movie-item > div.row > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > a > h2,
.series-item > div.row > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > a > div:nth-child(1),
.movie-item > div.row > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > a > div:nth-child(1) {
    color: var(--color-GWhite);
}

.progress {
    color: var(--color-Grey);
}

/* table */

th.sortable:hover,
.table-hover > tbody > tr:hover {
    background-color: var(--color-Grey);
}

/* paginator */

.backgrid-paginator > ul > li > i {
    color: var(--color-GWhite);
}

.backgrid-paginator > ul > li.disabled > i {
    color: var(--color-Grey);
}

.backgrid-paginator > ul > li.active > span {
    background-color: transparent;
    color: var(--color-GWhite);
}

/*-------------------------------------------*/

/* CALENDAR */

/* calendar upcoming */

.event .date h4 {
    color: var(--color-GWhite);
}

/* calendar month */

.calendar th {
    background-color: var(--color-DarkBG);
    color: var(--color-GWhite);
}

.fc-day.fc-today.fc-state-highlight,
.fc-day-number.fc-today.fc-state-highlight,
.fc-day-top.fc-today.fc-state-highlight {
    background-color: var(--color-DarkBG);
    color: var(--color-GWhite);
}

/* calendar list */

.fc-unthemed .fc-list-heading td {
    background-color: var(--color-DarkBG);
    color: var(--color-GWhite);
}

/*-------------------------------------------*/

/* ADD SERIES/MOVIES */

#add-series-screen .new-series .search-item,
#add-movies-screen .new-movies .search-item {
    background-color: transparent;
    color: var(--color-GWhite);
    box-shadow: none;
}

div.form-group > label {
    font-weight: 500;
}

#add-series-screen .add-series-search > input.form-control.x-series-search,
#add-movies-screen .add-movies-search > input.form-control.x-movies-search {
    background-color: #333333 !important;
    color: var(--color-GWhite) !important;
    border: none;
    box-shadow: none;
}

.input-group.input-group-lg.add-series-search > .input-group-addon,
.input-group.input-group-lg.add-movies-search > .input-group-addon {
    color: var(--color-GWhite);
    background-color: #333333;
    border: 1px solid #333333;
}

/*-------------------------------------------*/

/* SETTINGS */

/* settings texts */

legend {
    color: var(--color-GWhite);
}

/*thingy*/

.thingy {
    background-color: var(--color-Grey);
    color: var(--color-GWhite);
    box-shadow: none;
    border: 1px solid var(--color-Grey);
}

.add-card .center {
    background-color: var(--color-Grey);
    border: 1px solid var(--color-Grey);
}

.metadata-item {
    background-color: var(--color-Grey);
    color: var(--color-GWhite);
    box-shadow: none;
}

/*add thingy*/

.add-thingy {
    background-color: var(--color-Grey);
    color: var(--color-GWhite);
    box-shadow: none;
}

.add-thingy > div > .btn-default,
.add-thingy > div > div > .btn.btn-xs.btn-default.dropdown-toggle {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.add-thingy > div > .btn-default:hover,
.add-thingy > div > div > .btn.btn-xs.btn-default.dropdown-toggle:hover {
    color: var(--color-DarkBG);
    background-color: var(--color-GWhite);
    border-color: var(--color-GWhite);
    outline-style: none;
}

/*-------------------------------------------*/

/* BUTTONS */

.btn-default {
    color: var(--color-GWhite);
    background-color: var(--color-DarkBG);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.fc-state-default {
    color: var(--color-GWhite);
    background-color: var(--color-DarkBG);
    border-color: var(--color-GWhite);
    outline-style: none;
    background-image: none;
    text-shadow: none;
}

.fc-state-hover {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
    border-color: var(--color-GWhite);
    outline-style: none;
    background-image: none;
    text-shadow: none;
}

.fc-state-active {
    color: var(--color-DarkBG);
    background-color: var(--color-GWhite);
    border-color: var(--color-GWhite);
    outline-style: none;
    background-image: none;
    text-shadow: none;
}

.fc-state-disabled {
    color: var(--color-DarkBG);
    background-color: var(--color-DarkBG);
    border-color: var(--color-DarkBG);
    outline-style: none;
    background-image: none;
    text-shadow: none;
}

.btn-default:hover {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.btn-default.active,
.btn-default.active:hover {
    color: var(--color-DarkBG);
    background-color: var(--color-GWhite);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.btn-default.disabled,
.btn-default.disabled:hover {
    color: var(--color-Grey);
    background-color: var(--color-DarkBG);
    border-color: var(--color-Grey);
    outline-style: none;
}

.btn-default:active:hover {
    color: var(--color-Grey);
    background-color: var(--color-DarkBG);
    border-color: var(--color-Grey);
    outline-style: none;
}

.btn-default.focus.active {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.input-group-btn > button.btn.btn-icon-only.dropdown-toggle,
.btn.btn-icon-only.x-copy-api-key.hidden-xs {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
}

.input-group-btn > button.btn.btn-icon-only.dropdown-toggle:hover {
    color: var(--color-Grey);
    background-color: var(--color-GWhite);
}

.modal-footer > button:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]) {
    color: var(--color-GWhite);
    background-color: var(--color-DarkBG);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.modal-footer > button:hover:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]) {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.modal-footer > button:active:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]) {
    color: var(--color-DarkBG);
    background-color: var(--color-GWhite);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.btn.btn-icon-only.x-ical-copy,
.btn.btn-icon-only.no-router.x-ical-webcal {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
}

.btn.btn-icon-only.x-ical-copy:hover,
.btn.btn-icon-only.x-ical-copy.zeroclipboard-is-hover,
.btn.btn-icon-only.no-router.x-ical-webcal:hover {
    color: var(--color-Grey);
    background-color: var(--color-GWhite);
}

.btn.x-search-back {
    color: var(--color-GWhite);
    background-color: var(--color-DarkBG);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.btn.x-search-back:hover {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
    border-color: var(--color-GWhite);
    outline-style: none;
}

/* outline */

.btn {
    outline: 0 !important;
}

/*-------------------------------------------*/

/* CHECKBOX */

.well {
    background-color: var(--color-Grey);
    border: 1px solid var(--color-Grey);
}

.toggle p span {
    color: var(--color-Grey);
}

.toggle input:checked ~ p span:nth-child(1) {
    color: var(--color-GWhite);
}

.toggle input:not(:checked) ~ p span:nth-child(2) {
    color: var(--color-GWhite);
}

/* FORM */

.form-control {
    color: var(--color-GWhite);
    background-color: var(--color-Grey) !important;
    border: 1px solid var(--color-Grey);
}

.form-control:focus {
    border-color: var(--color-Grey);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--color-Grey);
}

.bootstrap-tagsinput {
    background-color: var(--color-Grey);
    border: 1px solid var(--color-Grey);
    color: var(--color-GWhite);
}

/*-------------------------------------------*/

/* TABS */

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
    border: 1px solid var(--color-GWhite);
}

.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
    color: var(--color-GWhite);
    background-color: var(--color-DarkBG);
    border: 1px solid var(--color-GWhite);
}

/*-------------------------------------------*/

/* DROPDOWN MENU */

.open > .dropdown-toggle.btn-default:focus {
    color: var(--color-DarkBG);
    background-color: var(--color-GWhite);
    border-color: var(--color-GWhite);
    outline-style: none;
}

.dropdown-menu {
    background-color: var(--color-DarkBG);
    border-color: var(--color-GWhite);
}

.dropdown-menu > li > a {
    color: var(--color-GWhite);
}

.dropdown-menu > li > a:hover {
    color: var(--color-GWhite);
    background-color: var(--color-Grey);
}

/*-------------------------------------------*/

/* automatic search text */

.btn.btn-lg.btn-block.x-search-auto {
    color: var(--color-DarkBG);
}

/* close */

.close,
.close:hover,
.close:focus {
    color: var(--color-GWhite) !important;
    opacity: 1;
}

/*labels*/

.badge-inverse {
    color: var(--color-DarkBG);
}

/* qualiies */

ul.qualities li {
    border: 1px solid var(--color-Grey);
    background: var(--color-Grey);
}

ul.qualities li .select-handle,
ul.qualities li.selected .quality-label {
    color: var(--color-GWhite);
}

ul.qualities li .quality-label {
    color: var(--color-GWhite);
}

ul.qualities li:hover {
    border-color: var(--color-GWhite);
    background: var(--color-GWhite);
}

ul.qualities li:hover .quality-label,
ul.qualities li:hover .select-handle,
ul.qualities li.selected:hover .select-handle {
    color: var(--color-DarkBG);
}

/* already exists text */

#add-series-screen .search-item a,
#add-movies-screen .search-item a {
    color: var(--color-GWhite);
}

/* logs */

.nav.nav-pills.nav-stacked > li:not([class*="active"]) > a:focus,
.nav.nav-pills.nav-stacked > li:not([class*="active"]) > a:hover {
    color: var(--color-DarkBG);
    background-color: var(--color-GWhite);
}

pre {
    color: #20C20E;
    background-color: black;
    border: 1px solid black;
}

pre::selection {
    color: black;
    background: #20C20E;
}

pre::-moz-selection {
    color: black;
    background: #20C20E;
}

/* titles */

a,
.episode-title-cell {
    color: var(--color-GWhite);
    text-decoration: none;
}

a:focus,
a:hover,
.episode-title-cell:focus,
.episode-title-cell:hover {
    color: var(--color-GWhite);
    text-decoration: underline;
}

/*-------------------------------------------*/

@media (max-width: 991px) {
    .toolbar .page-toolbar .x-toolbar-left-1 {
        display: block;
    }
    .toolbar .page-toolbar .btn-group {
        display: block;
    }
    .btn-group.btn-group-collapse > .btn {
        margin: 2px;
        display: block;
        float: none;
        border-radius: 4px!important;
        word-wrap: normal;
        white-space: normal;
    }
}

@media screen and (max-width: 767px) {
    .table-responsive {
        border: none;
    }
}

/*-------------------------------------------*/

Raw Text

Recent Public Pastes