Last active
March 15, 2021 21:57
-
-
Save gigawatts/eee083fe09a9d09a726199322c62a99e to your computer and use it in GitHub Desktop.
Transmission Web UI Flood | tampermonkey
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Flood Web UI contrast fix | |
| // @namespace https://gist.github.com/gigawatts/ | |
| // @description Fix the low contract colors used on the Flood web UI | |
| // @author Gigawatts | |
| // @homepage https://gist.github.com/gigawatts/eee083fe09a9d09a726199322c62a99e/ | |
| // @updateURL https://gist.githubusercontent.com/raw/eee083fe09a9d09a726199322c62a99e/transmission-flood.js | |
| // @downloadURL https://gist.githubusercontent.com/raw/eee083fe09a9d09a726199322c62a99e/transmission-flood.js | |
| // @version 1.0.1 | |
| // @match http://*/transmission/web/* | |
| // @grant GM_addStyle | |
| // @run-at document-start | |
| // ==/UserScript== | |
| GM_addStyle (` | |
| :root { | |
| --rgb-background: 235, 235, 235; | |
| --color-modal-background: rgb(235, 235, 235); | |
| --color-search-background: rgba(215, 215, 215, 0.3); | |
| --color-modal-header: rgb(20, 40, 60); | |
| --color-modal-user-interface-column-background: rgb(220, 220, 220); | |
| --color-modal-user-interface-column-border: rgb(245, 245, 245); | |
| } | |
| .dark-mode { | |
| --rgb-positive: 57, 206, 131; | |
| --rgb-upload: 62, 167, 255; | |
| --rgb-active: 37, 141, 229; | |
| --rgb-text: 142, 163, 188; | |
| --rgb-background: 15, 15, 15; | |
| --color-positive: rgb(var(--rgb-positive)); | |
| --color-negative: rgb(233, 87, 121); | |
| --color-download: rgb(var(--rgb-positive)); | |
| --color-upload: rgb(var(--rgb-upload)); | |
| --color-active: rgb(var(--rgb-active)); | |
| --color-text: rgb(var(--rgb-text)); | |
| --color-header: rgba(var(--rgb-text), 0.5); | |
| --color-background: rgb(var(--rgb-background)); | |
| --color-border: rgb(32, 45, 60); | |
| --color-dropdown-header: rgba(var(--rgb-text), 0.5); | |
| --color-progress-bar-download: var(--color-download); | |
| --color-progress-bar-download-background: rgba(var(--rgb-positive), 0.15); | |
| --color-progress-bar-upload: var(--color-upload); | |
| --color-progress-bar-upload-background: rgba(--rgb-upload, 0.15); | |
| --color-progress-bar-metadata: rgb(136, 153, 168); | |
| --color-progress-bar-metadata-background: rgba(136, 153, 168, 0.15); | |
| --color-progress-bar-error: rgb(242, 172, 188); | |
| --color-progress-bar-error-background: rgba(242, 172, 188, 0.15); | |
| --color-progress-bar-stopped: rgb(195, 204, 211); | |
| --color-progress-bar-stopped-background: rgba(195, 204, 211, 0.15); | |
| --color-progress-bar-selected-active: rgb(255, 255, 255); | |
| --color-progress-bar-selected-active-background: rgba(255, 255, 255, 0.15); | |
| --color-progress-bar-selected-inactive: rgb(255, 255, 255, 0.35); | |
| --color-progress-bar-selected-inactive-background: rgba(255, 255, 255, 0.15); | |
| --color-panel-header: rgba(var(--rgb-text), 0.9); | |
| --color-panel-text: var(--color-text); | |
| --color-panel-hover: rgb(119, 141, 168); | |
| --color-panel-active: var(--color-active); | |
| --color-switch-inactive: rgb(171, 186, 199); | |
| --color-switch-active: var(--color-active); | |
| --color-switch-handle: rgb(255, 255, 255); | |
| --color-top-bar-inactive: var(--color-header); | |
| --color-top-bar-background: rgb(20, 20, 20); | |
| --color-top-bar-active: var(--color-active); | |
| --color-top-bar-text: rgb(27, 26, 28); | |
| --color-top-bar-border: rgba(41, 51, 65, 0.15); | |
| --color-search-text: var(--color-active); | |
| --color-search-placeholder: rgba(var(--rgb-text), 0.4); | |
| --color-search-icon: var(--color-search-placeholder); | |
| --color-search-icon-active: var(--color-active); | |
| --color-search-background: rgba(9, 24, 36, 0.3); | |
| --color-search-background-active: rgba(var(--rgb-active), 0.25); | |
| --color-search-border: rgba(9, 24, 36, 0.4); | |
| --color-search-border-active: rgba(var(--rgb-active), 0.3); | |
| --color-alert-positive: var(--color-positive); | |
| --color-alert-negative: var(--color-negative); | |
| --color-alert-text: var(--color-text); | |
| --color-alert-background: rgba(var(--rgb-background), 0.95); | |
| --color-badge-text: var(--color-background); | |
| --color-badge-background: var(--color-text); | |
| --color-button-text: rgb(255, 255, 255); | |
| --color-button-primary-background: var(--color-active); | |
| --color-button-primary-border: var(--color-active); | |
| --color-button-primary-shadow-1: rgb(12, 121, 213); | |
| --color-button-primary-shadow-2: rgba(10, 107, 189, 0.8); | |
| --color-button-secondary-background: var(--color-positive); | |
| --color-button-secondary-border: var(--color-positive); | |
| --color-button-secondary-shadow-1: rgb(39, 158, 98); | |
| --color-button-secondary-shadow-2: rgba(34, 138, 86, 0.8); | |
| --color-button-tertiary-background: rgb(136, 153, 168); | |
| --color-button-tertiary-border: rgb(136, 153, 168); | |
| --color-button-tertiary-shadow-1: rgb(95, 114, 130); | |
| --color-button-tertiary-shadow-2: rgba(84, 101, 115, 0.8); | |
| --color-button-quaternary-background: rgb(30, 30, 30); | |
| --color-button-quaternary-border: var(--color-border); | |
| --color-button-quaternary-text: rgb(136, 153, 168); | |
| --color-checkbox-background: rgb(30, 30, 30); | |
| --color-checkbox-background-dark: rgb(31, 39, 49); | |
| --color-checkbox-border: var(--color-border); | |
| --color-checkbox-border-dark: rgb(25, 31, 40); | |
| --color-checkbox-mark: rgb(136, 153, 168); | |
| --color-checkbox-background-active: rgba(var(--rgb-active), 0.1); | |
| --color-checkbox-text-active: var(--color-active); | |
| --color-checkbox-border-active: var(--color-active); | |
| --color-checkbox-mark-active: var(--color-active); | |
| --color-context-menu-text: var(--color-text); | |
| --color-context-menu-background: rgb(255, 255, 255); | |
| --color-context-menu-background-hover: rgba(233, 238, 242, 0.4); | |
| --color-context-menu-text-hover: rgb(62, 78, 97); | |
| --color-context-menu-separator: rgba(41, 51, 65, 0.075); | |
| --color-context-menu-shadow-1: rgba(40, 48, 59, 0.05); | |
| --color-context-menu-shadow-2: rgba(40, 48, 59, 0.1); | |
| --color-context-menu-shadow-3: rgba(40, 48, 59, 0.1); | |
| --color-graph-text: var(--color-text); | |
| --color-input-background: rgb(30, 30, 30); | |
| --color-input-border: var(--color-border); | |
| --color-input-text: rgb(136, 153, 168); | |
| --color-input-placeholder: rgba(171, 186, 199, 0.25); | |
| --color-input-border-hover: rgb(23, 33, 43); | |
| --color-input-text-hover: rgb(210, 216, 222); | |
| --color-input-background-active: rgba(var(--rgb-active), 0.15); | |
| --color-input-border-active: var(--color-active); | |
| --color-input-text-active: rgb(246, 250, 254); | |
| --color-input-addon-icon: rgb(136, 153, 168); | |
| --color-input-addon-border: var(--color-border); | |
| --color-input-addon-icon-active: var(--color-active); | |
| --color-input-addon-border-active: rgba(var(--rgb-active), 0.15); | |
| --color-input-file-background: rgb(30, 30, 30); | |
| --color-input-file-border: var(--color-border); | |
| --color-input-file-border-active: rgb(23, 33, 43); | |
| --color-input-file-text: var(--color-text); | |
| --color-input-file-icon: rgba(94, 114, 140, 0.5); | |
| --color-input-file-icon-active: var(--color-active); | |
| --color-input-file-icon-invalid: var(--color-negative); | |
| --color-input-file-remove-icon: rgba(94, 114, 140, 0.5); | |
| --color-input-file-remove-background: transparent; | |
| --color-input-file-remove-icon-active: rgb(255, 255, 255); | |
| --color-input-file-remove-background-active: var(--color-negative); | |
| --color-modal-backdrop: rgba(11, 16, 20, 0.95); | |
| --color-modal-background: rgb(40, 40, 40); | |
| --color-modal-header: rgb(229, 240, 255); | |
| --color-modal-text: rgb(125, 141, 159); | |
| --color-modal-text-light: rgba(125, 141, 159, 0.6); | |
| --color-modal-loading: var(--color-active); | |
| --color-modal-link: var(--color-active); | |
| --color-modal-tab-label: rgb(171, 194, 226); | |
| --color-modal-tab-label-active: var(--color-active); | |
| --color-modal-badge-background: rgba(125, 141, 159, 0.2); | |
| --color-modal-menu-border: rgb(54, 62, 72); | |
| --color-modal-add-tab-bar-shadow: rgb(54, 62, 72); | |
| --color-modal-user-interface-column-background: rgb(30, 30, 30); | |
| --color-modal-user-interface-column-border: var(--color-border); | |
| --color-modal-details-header: rgb(184, 193, 203); | |
| --color-modal-files-icon: rgba(125, 141, 159, 0.4); | |
| --color-modal-files-folder: rgba(125, 141, 159, 0.6); | |
| --color-modal-files-count: var(--color-active); | |
| --color-modal-torrent-details-shadow: rgb(54, 62, 72); | |
| --color-modal-torrent-details-header-icon: rgba(77, 111, 135, 0.5); | |
| --color-select-icon: rgb(136, 153, 168); | |
| --color-select-border: rgb(32, 45, 60); | |
| --color-select-option-background: rgb(41, 51, 65); | |
| --color-select-option-background-hover: rgb(36, 46, 60); | |
| --color-column-header-background: rgb(30, 30, 30); | |
| --color-column-header-border: rgba(29, 41, 56, 0.08); | |
| --color-column-header-shadow: rgba(29, 41, 56, 0.1); | |
| --color-column-header-text: rgb(171, 186, 199); | |
| --color-column-header-text-active: rgb(88, 111, 132); | |
| --color-torrent-text: rgb(75, 103, 127); | |
| --color-torrent-text-inactive: rgb(195, 204, 211); | |
| --color-torrent-text-selected: rgb(255, 255, 255); | |
| --color-torrent-background-selected: rgb(27, 134, 224); | |
| --color-torrent-background-selected-error: var(--color-negative); | |
| --color-torrent-list-background: rgb(20, 20, 20); | |
| --color-label-background: rgb(220, 226, 230); | |
| --color-label-text: rgb(111, 125, 135); | |
| --color-label-background-selected: rgb(78, 163, 234); | |
| --color-label-text-selected: rgb(255, 255, 255); | |
| --color-label-background-error: rgb(237, 121, 148); | |
| --color-label-text-error: rgb(251, 232, 236); | |
| --color-size-text-selected: rgb(255, 255, 255); | |
| --color-priority-low: var(--color-active); | |
| --color-priority-normal: var(--color-positive); | |
| --color-priority-high: var(--color-positive); | |
| --color-priority-off: rgb(67, 96, 118); | |
| } | |
| `); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment