/** * RedRound dark mode. * * Activated by adding class "dark" to (see js/darkmode.js). * Replaces the image-based light chrome with flat dark surfaces and * modern border-radius corners, keeping the RedRound red accent. */ html.dark, html.dark body { background: #141417; color: #d6d6d9; } /* ------------------------------------------------------------------ chrome */ /* rounded-corner box images -> flat panels */ html.dark .container .angle, html.dark #AngleTopLeft, html.dark #AngleTopRight, html.dark #AngleTopBorder, html.dark #AngleBottomLeft, html.dark #AngleBottomRight, html.dark #AngleBottomBorder { background: none !important; } html.dark #AngleTopLeft { height: 12px; } html.dark #AngleBottomLeft { height: 12px; } html.dark #ContentBorderLeft { background: #1e1e23 !important; border-radius: 10px; border: 1px solid #2e2e35; } html.dark #ContentBorderRight { background: none !important; } /* header keeps its red banner image; give a fallback tint */ html.dark #header { background-color: transparent; } html.dark #footer, html.dark #footer a { color: #8a8a90; } /* ------------------------------------------------------------------ text */ html.dark h1, html.dark h2, html.dark h3 { color: #e66478; } html.dark a:link, html.dark a:visited { color: #e66478; } html.dark a:hover { color: #ff8598; } html.dark p, html.dark td, html.dark th, html.dark li, html.dark span, html.dark label, html.dark font { color: #d6d6d9; } /* ------------------------------------------------------------------ tables */ html.dark table.table, html.dark #adminSearchSettings, html.dark #adminTransferSettings, html.dark #adminProwlarrSettings, html.dark table[bordercolor] { background-color: #1e1e23 !important; border-color: #33333b !important; } html.dark th, html.dark .tableheading { background-color: #26262d !important; color: #e8e8ec !important; } html.dark td.tablecontent { background-color: #1e1e23 !important; } html.dark tr:hover td { background-color: #24242b; } /* legacy bgcolor attributes (engine output, old tables) */ html.dark [bgcolor] { background-color: #1e1e23 !important; } html.dark tr[bgcolor] td, html.dark td[bgcolor] { background-color: #222228 !important; } html.dark body[bgcolor] { background-color: #141417 !important; } /* ------------------------------------------------------------------ forms */ html.dark input[type="text"], html.dark input[type="Text"], html.dark input[type="password"], html.dark input[type="Password"], html.dark select, html.dark textarea { background-color: #26262d; color: #e8e8ec; border: 1px solid #3a3a44; border-radius: 4px; padding: 2px 4px; } /* the native option popup renders see-through unless the options carry a solid background of their own */ html.dark select option, html.dark select optgroup { background-color: #26262d; color: #e8e8ec; } html.dark input[type="submit"], html.dark input[type="Submit"], html.dark input[type="button"], html.dark button { background-color: #8e1b2d; color: #fff; border: 1px solid #6d1523; border-radius: 4px; padding: 3px 10px; cursor: pointer; } html.dark input[type="submit"]:hover, html.dark button:hover { background-color: #a92238; } /* ------------------------------------------------------------------ index specifics */ html.dark #indexStatsBar td { background-color: transparent !important; } html.dark .ui-progressbar { background: #26262d; border-color: #3a3a44; } html.dark #tabs, html.dark .ui-tabs .ui-tabs-panel { background: transparent; } html.dark .ui-widget-content { background: #1e1e23; color: #d6d6d9; border-color: #33333b; } html.dark .ui-widget-header { background: #8e1b2d; color: #fff; border-color: #6d1523; } html.dark .ui-state-default, html.dark .ui-tabs .ui-tabs-nav li { background: #26262d; color: #d6d6d9; border-color: #33333b; } html.dark .ui-state-default a { color: #d6d6d9; } html.dark .ui-tabs .ui-tabs-nav li.ui-tabs-selected, html.dark .ui-state-active { background: #8e1b2d; border-color: #6d1523; } html.dark .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, html.dark .ui-state-active a { color: #fff; } /* transfer list */ html.dark #transferList td, html.dark #transferList th { border-color: #2e2e35; } html.dark #transferList th { background-color: #26262d !important; } /* alternating transfer ROWS default to #ccc / #fff — the light rectangles */ html.dark tr.gray, html.dark table#transfer_table tr.gray { background-color: #1e1e23 !important; } html.dark tr.white, html.dark table#transfer_table tr.white { background-color: #24242b !important; } html.dark tr.gray td, html.dark tr.white td { color: #e2e2e6 !important; } /* light upload/URL input fields at the top of the page */ html.dark .upload_file, html.dark input.upload_file { background-color: #26262d !important; color: #e8e8ec !important; } /* transfer-name links + cells read #222 (near-black) by default */ html.dark table#transfer_table a, html.dark a.transferName, html.dark table#transfer_table td, html.dark table#transfer_table th, html.dark table#transfer_table th a { color: #e2e2e6 !important; } /* column-header row + its sort links: the sort links carry background:black, sized to their text, which renders as separate black boxes. Make the whole header row one flat dark bar. */ html.dark table#transfer_table th { background-color: #26262d !important; } html.dark table#transfer_table th a, html.dark table#transfer_table th a.sortheader, html.dark table.sortable a.sortheader { background-color: transparent !important; } html.dark table#transfer_table tr:hover td { background-color: #2a2a31; } html.dark table#transfer_table tr.hover, html.dark table#transfer_table tr.hover a { color: #fff !important; } /* progress bar: the empty track defaults to white. Darken it, keep the colored fill (set inline per state), and make the % label readable on both the dark track and the colored fill via a dark halo. */ html.dark .progress, html.dark .pbseeding, html.dark .pbdownload, html.dark .pbstop, html.dark .pbfinished { background-color: #33333b !important; } /* the fill carries a light gradient PNG designed for the light theme; drop it so the solid state color (green/blue/red, set inline) shows on the dark track */ html.dark .pbbackgnd { background-image: none !important; } html.dark .pbbackgnd, html.dark .pbpercent { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.95) !important; } /* ------------------------------------------------------------------ admin dashboard */ /* decorative cell/table background art shows through on dark surfaces */ html.dark th, html.dark td { background-image: none !important; } html.dark [id^="adminMainStats"] { background-image: none !important; } html.dark #adminMenu, html.dark .dashboard, html.dark #middle, html.dark .middle { background-color: transparent !important; } html.dark div.middle table, html.dark div.middle td { background-color: transparent !important; } /* stat boxes on the admin dashboard use background images; flatten them */ html.dark [style*="statstfb4rt-bg"], html.dark [style*="statsdatabase-bg"], html.dark [style*="statssuperadmin-bg"], html.dark [style*="statssystem-bg"] { background-image: none !important; background-color: #1e1e23 !important; border: 1px solid #2e2e35; border-radius: 8px; } /* ------------------------------------------------------------------ index page panels */ html.dark #indexTorrentUpload, html.dark #indexTorrentGet, html.dark #TransferListBulkActions, html.dark #indexRefreshOptions, html.dark #action_in_progress, html.dark #dirActions, html.dark .ui-tabs .ui-tabs-panel, html.dark #tabs > div { background-color: #1e1e23 !important; color: #d6d6d9; } html.dark #indexTorrentUpload, html.dark #indexTorrentGet { border: 1px solid #2e2e35; border-radius: 8px; } html.dark #footer { background-color: #141417 !important; border-top: 1px solid #2e2e35; } /* ------------------------------------------------------------------ login page */ html.dark #inhalt { background-color: #1e1e23 !important; border: 1px solid #2e2e35 !important; color: #d6d6d9; } html.dark #inhalt h1 { background-color: #8e1b2d !important; } html.dark #inhalt td, html.dark #inhalt p { color: #d6d6d9; } html.dark #inhalt a { color: #e66478; } /* ------------------------------------------------------------------ misc */ html.dark pre { background: #101013; color: #cfcfd4; border: 1px solid #2e2e35; } html.dark hr { border-color: #2e2e35; } html.dark ::selection { background: #8e1b2d; color: #fff; }