☰

Darkarr (for Sonarr v3)

Dark theme for Radarr version 3.

  1. /* ==UserStyle==
  2. @name         Darkarr (for Sonarr v3)
  3. @version      01.31.2023
  4. @namespace    Wouldn't You Like To Know?
  5. @description  Dark theme for Radarr version 3.
  6. @author       peeps with a regex edit from NoahBK
  7. @license      No License
  8. ==/UserStyle== */
  9.  
  10. @-moz-document regexp("^http://localhost:8989/(.*)$") {
  11. /*----------------- COLORS ------------------*/
  12. :root {
  13.     --color-DarkBG: #272727;    /* var(--color-DarkBG) */
  14.     --color-DarkBG2: #333333;    /* var(--color-DarkBG2) */
  15.     --color-White: #D4D4D4;     /* var(--color-White) */
  16.     --color-Grey: #444444;      /* var(--color-Grey) */
  17.     --color-Grey2: #707070;      /* var(--color-Grey2) */    
  18.     --color-Scroll: #555555;      /* var(--color-Scroll) */
  19.     --color-Scroll2: #4a4a4a;      /* var(--color-Scroll2) */
  20. }
  21.  
  22. /* Background */
  23. body {
  24.     background: var(--color-DarkBG);
  25.     background-color: var(--color-DarkBG);
  26.     color: var(--color-White);
  27. }
  28.  
  29. /* Side Bar */
  30. .PageSidebar-sidebar-20RVF {
  31.     background-color: var(--color-DarkBG);
  32.     margin-right: -17px !important;
  33.     margin-bottom: -17px !important;
  34. }
  35.  
  36. .PageSidebarItem-isActiveParentLink-1DcW7 {
  37.     background-color: var(--color-DarkBG);
  38. }
  39.  
  40. .PageSidebarItem-isActiveItem-2jsqy {
  41.     background-color: var(--color-DarkBG2);
  42. }
  43.  
  44. /* Scroll Bar Color */
  45. .OverlayScroller-thumb-1E5mt {
  46.     background-color: var(--color-Scroll);
  47.     min-height: 30px;
  48. }
  49.  
  50. .OverlayScroller-thumb-1E5mt:hover {
  51.     background-color: var(--color-Scroll2);
  52. }
  53.  
  54. /* Top Bar */
  55. .PageToolbar-toolbar-WwUGV {
  56.     background-color: var(--color-DarkBG);
  57.     color: var(--color-White);
  58. }
  59.  
  60. .PageToolbarButton-label--Qykn {
  61.     background-color: var(--color-DarkBG);
  62.     color: var(--color-White);
  63. }
  64.  
  65. .PageHeader-header-JYJAc {
  66.     background-color: var(--color-DarkBG);
  67.     color: var(--color-White);
  68. }
  69.  
  70. /* Search Box */
  71. .SeriesSearchInput-input-2z4ap {
  72.     width: 400px;
  73.     height: 34px;
  74.     padding: 6px 16px;
  75.     border: none;
  76.     border-bottom: 0;
  77.     border-radius: 4px;
  78.     background-color: var(--color-Grey);
  79.     color: #fff; /* Blinking Cursor */
  80. }
  81.  
  82. .SeriesSearchInput-container-nVvVV .SeriesSearchInput-seriesContainer-1rk9B {
  83.     border: 0px solid #595959;
  84.     border-radius: 4px;
  85.     background-color: #333333;
  86.     color: var(--color-White);
  87. }
  88.  
  89. .SeriesSearchInput-highlighted-dGPda {
  90.     background-color: var(--color-Grey);
  91. }
  92.  
  93. /* Search Scroll Bar */
  94. .SeriesSearchInput-container-nVvVV .SeriesSearchInput-seriesContainer-1rk9B::-webkit-scrollbar-thumb {
  95.     border: 0px solid transparent;
  96.     background-color: var(--color-Scroll);
  97. }
  98.  
  99. .SeriesSearchInput-container-nVvVV .SeriesSearchInput-seriesContainer-1rk9B::-webkit-scrollbar-thumb:hover {
  100.     border: 0px solid transparent;
  101.     background-color: var(--color-Scroll2);
  102. }
  103.  
  104. /*Series Options Section*/
  105. .ModalContent-modalContent-f33n- {
  106.     background-color: var(--color-DarkBG);
  107. }
  108.  
  109. .ModalBody-innerModalBody-3gO-u {
  110.     background-color: var(--color-DarkBG);
  111.     color: var(--color-White);
  112. }
  113.  
  114. .ModalFooter-modalFooter-3jawm {
  115.     background-color: var(--color-DarkBG);
  116.     color: var(--color-White);
  117. }
  118.  
  119. .TableOptionsColumn-column-1ErGH {
  120.     background-color: var(--color-Grey);
  121.     color: var(--color-White);
  122. }
  123.  
  124. .Scroller-vertical-3bAsi.Scroller-autoScroll-2_rs9 {
  125.     background-color: var(--color-Grey);
  126. }
  127.  
  128. .Scroller-scroller-_8_uO::-webkit-scrollbar-thumb {         /* bottom of scroll section*/
  129.     background-color: var(--color-Scroll);
  130. }
  131.  
  132. .Scroller-scroller-_8_uO::-webkit-scrollbar-thumb:hover {
  133.     background-color: var(--color-Scroll2);
  134. }
  135.  
  136. .Input-input-25Gr2 {
  137.     background-color: var(--color-DarkBG);
  138.     color: var(--color-White);
  139. }
  140.  
  141. .EnhancedSelectInputOption-option-8Cz3_ {           /* Root Folder */
  142.     background-color: var(--color-DarkBG);
  143.     color: var(--color-White);
  144.     padding: 2px 10px;
  145. }
  146.  
  147. .EnhancedSelectInputOption-option-8Cz3_:Hover {
  148.     background-color: var(--color-Grey);
  149.     color: var(--color-White);
  150.     padding: 2px 10px;
  151. }
  152.  
  153. .MenuItem-menuItem-Yot4A {
  154.     background-color: var(--color-Grey);
  155.     color: var(--color-White);
  156. }
  157.  
  158. .MenuItem-menuItem-Yot4A:hover, .MenuItem-menuItem-Yot4A:focus {
  159.     background-color: #515151;
  160.     color: var(--color-White);
  161. }
  162.  
  163. .SeriesIndexPoster-title-1h3SR {
  164.     background-color: var(--color-DarkBG);
  165. }
  166.  
  167. .SeriesIndexPosterInfo-info-3ahzo {
  168.     background-color: var(--color-DarkBG);
  169. }
  170.  
  171. .SeriesIndexPoster-nextAiring-2nqSB {
  172.     background-color: #00ccff;
  173.     color: #272727;
  174. }
  175.  
  176. .VirtualTableRow-row-P7KbK:hover {
  177.     background: var(--color-Grey);
  178. }
  179.  
  180. .SeriesIndexOverview-link-3BWTB {
  181.     color: var(--color-White);
  182. }
  183.  
  184. .SeriesIndexOverview-link-3BWTB:hover {
  185.     color: var(--color-White);
  186. }
  187.  
  188. .SeriesIndexOverview-info-2BRE5:hover {
  189.     background: var(--color-Grey);
  190. }
  191.  
  192. /* Custom Filter*/
  193. .TagInput-internalInput-2esEh {                 /* Movie Tag */
  194.     background-color: var(--color-DarkBG);
  195.     color: var(--color-White);
  196. }
  197.  
  198. .FilterBuilderRow-filterRow-3Vivt:hover {
  199.     background: var(--color-Grey);
  200. }
  201.  
  202. .AutoSuggestInput-suggestionsContainerOpen-20zQp .AutoSuggestInput-suggestionsContainer-1tCOW {
  203.     background-color: var(--color-DarkBG);
  204.     color: var(--color-White);
  205. }
  206.  
  207. .AutoSuggestInput-suggestionHighlighted-2s3WQ {
  208.     background-color: var(--color-Grey);
  209.     color: var(--color-White);
  210. }
  211.  
  212. /*Custom View*/
  213. .Input-input-25Gr2 {
  214.     background-color: var(--color-DarkBG);
  215.     color: var(--color-White);
  216. }
  217.  
  218. /*TV Details*/
  219. .SeriesDetailsSeason-season-rsdqF {
  220.     margin-bottom: 20px;
  221.     border: 0px solid #e5e5e5;
  222.     border-radius: 4px;
  223.     background-color: var(--color-DarkBG);
  224. }
  225.  
  226. tr:hover {
  227.     background-color: var(--color-Grey) !important;
  228.     color: var(--color-White) !important;
  229. }
  230.  
  231. .TableRow-row-2NoqV {
  232.     transition: background-color .1s;
  233. }
  234.  
  235. .SeriesDetailsSeason-episodes-1BN90 {
  236.     padding-top: 0px;
  237. }
  238.  
  239. .SeriesDetailsSeason-header-11IdR {
  240.     background-color: var(--color-DarkBG2);
  241. }
  242.  
  243. .SeriesDetailsSeason-collapseButtonContainer-38tta {
  244.     background-color: var(--color-DarkBG2);
  245. }
  246.  
  247. .Popover-tooltipBody-3C1-B {
  248.     background-color: var(--color-DarkBG2);
  249. }
  250.  
  251. .Popover-title-2n2Xp {
  252.     background-color: var(--color-DarkBG2);
  253. }
  254.  
  255. .AddNewSeriesSearchResult-underlay-2JxgL {
  256.     background-color: var(--color-DarkBG);
  257.     transition: background .1s;
  258. }
  259.  
  260. .AddNewSeriesSearchResult-underlay-2JxgL:hover {
  261.     background-color: var(--color-Grey);
  262.     transition: background .1s;
  263. }
  264.  
  265. .PageContentFooter-contentFooter-33N04 {
  266.     padding: 10px;
  267.     background-color: var(--color-DarkBG2);
  268. }
  269.  
  270. /* Season Pass*/
  271. .SeasonPassSeason-season-1z-Wa {
  272.     border: 0px solid var(--color-White);
  273.     background-color: var(--color-Grey);
  274. }
  275.  
  276. .SeasonPassSeason-episodes-3Ebns {
  277.     background-color: var(--color-Grey2) ;
  278.     color: var(--color-White)
  279. }
  280.  
  281. .SeasonPassSeason-allEpisodes-NZB2W {
  282.     background-color: #20923c !important;
  283. }
  284.  
  285.  
  286.  
  287.  
  288. /*---------------- Calendar ----------------*/
  289.  
  290. .Button-default-342be {                 /* Buttons */
  291.     background-color: var(--color-DarkBG);
  292.     color: var(--color-White);
  293. }
  294.  
  295. .Button-default-342be:hover {
  296.     background-color: var(--color-Grey);
  297.     color: var(--color-White);
  298. }
  299.  
  300. .CalendarDay-day-1-M7C:hover {          /* Calendar Days */
  301.     background-color: var(--color-Grey);
  302.     color: var(--color-White);
  303. }
  304.  
  305. .DayOfWeek-dayOfWeek-1dJna {            /* Day of Week */
  306.     border-color: #d6d6d6;
  307.     border: 1px solid;
  308.     background-color: var(--color-DarkBG);
  309.     color: var(--color-White);
  310. }
  311.  
  312. .CalendarDay-isToday-T00Hr {            /* Current Day */
  313.     background-color: #1b72e2;
  314.     color: var(--color-White);
  315. }
  316.  
  317. .CalendarEvent-seriesTitle-3nGRY {       /* Calendar Text */
  318.     color: #1b72e2;
  319. }
  320.  
  321. .CalendarEvent-episodeInfo-azFKq {
  322.     color: var(--color-White);
  323. }
  324.  
  325. .CalendarEvent-airTime-3YsgC {
  326.     color: var(--color-Grey2) ;
  327. }
  328.  
  329. .AgendaEvent-date-35W3p {
  330.     color: var(--color-White);
  331. }
  332.  
  333. .AgendaEvent-event-9bQfy:hover {
  334.     background-color: var(--color-Grey)
  335. }
  336.  
  337.  
  338. /*---------------- Settings ----------------*/
  339. /* Settings */
  340. .Settings-link-1nMZ_ {
  341.     color: #5d9cec;
  342. }
  343.  
  344. .Settings-summary-3vkWu {
  345.     color: var(--color-White);
  346. }
  347.  
  348. /* Media Management */
  349. .FieldSet-legend-2KHms {                /* Top Title */
  350.     color: var(--color-White);
  351. }
  352.  
  353. .NamingOption-token-3DMOs {             /* Movie Format ? Mark */
  354.     background-color: var(--color-DarkBG);
  355. }
  356.  
  357. .NamingOption-option-1V6MO:hover .NamingOption-token-3DMOs {
  358.     background-color: var(--color-Grey);
  359. }
  360.  
  361. .NamingOption-example-39sCU {
  362.     background-color: var(--color-DarkBG);
  363. }
  364.  
  365. .NamingOption-option-1V6MO:hover .NamingOption-example-39sCU {
  366.     background-color: var(--color-DarkBG);
  367. }
  368.  
  369. /* Profiles */
  370. button, [type="button"], [type="reset"], [type="submit"] {
  371.     border-radius: 4px;
  372. }
  373.  
  374. .Card-card-1klRK {
  375.     border-radius: 4px;
  376.     background-color: var(--color-Grey);
  377.     box-shadow: 0 0 0px 0px #e1e1e1;
  378.     color: var(--color-White);
  379. }
  380.  
  381. .QualityProfileItem-qualityNameContainer-1szcr {
  382.     border-radius: 4px;
  383.     margin-left: 0px;
  384.     background-color: var(--color-DarkBG);
  385.     color: var(--color-White);
  386. }
  387.  
  388. .QualityProfileItem-dragHandle-3IfDf {
  389.     background-color: var(--color-DarkBG);
  390.     border: 0px none;
  391.     border-radius: 4px;
  392. }
  393.  
  394. .QualityProfileItemGroup-qualityNameContainer-23tt9 {
  395.     border-radius: 4px;
  396.     margin-left: 0px;
  397.     background-color: var(--color-DarkBG);
  398.     color: var(--color-White);
  399. }
  400.  
  401. .QualityProfileItemGroup-dragHandle-2P5uE {
  402.     background-color: var(--color-DarkBG);
  403.     border: 0px none;
  404.     border-radius: 4px;
  405. }
  406.  
  407. .QualityProfileItem-qualityProfileItem-OzlTC {
  408.     border-radius: 4px;
  409.     background: var(--color-DarkBG);
  410. }
  411.  
  412. .QualityProfileItemGroup-qualityProfileItemGroup-1EgkU.QualityProfileItemGroup-editGroups-1P8D0 {
  413.     background: var(--color-Grey);
  414. }
  415.  
  416. /* Quality Circle */
  417. .QualityDefinition-thumb-1w8Jg {
  418.     top: 4px;
  419.     z-index: 2!important;
  420.     width: 6px;
  421.     height: 12px;
  422.     border: 1px solid #aaa;
  423.     border-radius: 3px;
  424.     background-color: #ccc;
  425.     text-align: center;
  426.     cursor: default;
  427. }
  428. }