biscuide revised this gist . Go to revision
No changes
biscuide revised this gist . Go to revision
No changes
biscuide revised this gist . Go to revision
1 file changed, 50 insertions, 54 deletions
userContent.css
| @@ -1,9 +1,21 @@ | |||
| 1 | - | @-moz-document regexp("^.*\.pdf(?:[?#].*)?$") { | |
| 2 | - | #viewerContainer > #viewer > .page > .canvasWrapper > canvas { | |
| 3 | - | filter: invert(100%); | |
| 1 | + | @-moz-document regexp("^.*\\.pdf(?:[?#].*)?$") { | |
| 2 | + | /* === Variables === */ | |
| 3 | + | :root { | |
| 4 | + | --bg-color: #292D32; | |
| 5 | + | --input-bg-color: #2c2c2c; | |
| 6 | + | --text-color: #ccc; | |
| 7 | + | --border-color: #555; | |
| 8 | + | --loading-bar-color: #333; | |
| 9 | + | --icon-filter: invert(100%) brightness(200%); | |
| 4 | 10 | } | |
| 5 | 11 | ||
| 6 | - | /* Dark background behind PDF pages */ | |
| 12 | + | /* === Page Inversion (for PDF content) === */ | |
| 13 | + | .page canvas { | |
| 14 | + | filter: invert(100%) !important; | |
| 15 | + | } | |
| 16 | + | ||
| 17 | + | /* === General Backgrounds === */ | |
| 18 | + | body, | |
| 7 | 19 | #outerContainer, | |
| 8 | 20 | #mainContainer, | |
| 9 | 21 | #viewerContainer, | |
| @@ -12,81 +24,65 @@ | |||
| 12 | 24 | #thumbnailView, | |
| 13 | 25 | #outlineView, | |
| 14 | 26 | #attachmentsView, | |
| 15 | - | #layersView { | |
| 16 | - | background-color: #292D32 !important; | |
| 27 | + | #layersView, | |
| 28 | + | .doorHangerRight, | |
| 29 | + | .menu, | |
| 30 | + | .editorParamsToolbar, | |
| 31 | + | .menuContainer, | |
| 32 | + | .dropdownToolbarButton select, | |
| 33 | + | .dialog, | |
| 34 | + | .dialog .mainContainer { | |
| 35 | + | background-color: var(--bg-color) !important; | |
| 36 | + | color: var(--text-color) !important; | |
| 17 | 37 | } | |
| 18 | 38 | ||
| 19 | - | /* Dark toolbar */ | |
| 39 | + | /* === Toolbar Styling === */ | |
| 20 | 40 | #toolbarContainer, | |
| 21 | 41 | .toolbar, | |
| 22 | 42 | #toolbarSidebar { | |
| 23 | - | background-color: #292D32 !important; | |
| 24 | - | color: #ccc !important; | |
| 43 | + | background-color: var(--bg-color) !important; | |
| 44 | + | color: var(--text-color) !important; | |
| 25 | 45 | } | |
| 26 | 46 | ||
| 27 | - | .toolbarButton > svg path { | |
| 28 | - | fill: #ffffff !important; | |
| 47 | + | .toolbarButton { | |
| 48 | + | background-color: transparent !important; | |
| 49 | + | color: var(--text-color) !important; | |
| 29 | 50 | } | |
| 30 | 51 | ||
| 31 | - | /* Make toolbar icons white */ | |
| 32 | 52 | .toolbarButton > svg, | |
| 33 | 53 | .toolbarButton::before, | |
| 34 | 54 | .toolbarButton::after { | |
| 35 | - | filter: invert(100%) brightness(200%) !important; | |
| 55 | + | filter: var(--icon-filter) !important; | |
| 36 | 56 | } | |
| 37 | 57 | ||
| 38 | - | /* Toolbar buttons */ | |
| 39 | - | .toolbarButton { | |
| 40 | - | background-color: transparent !important; | |
| 41 | - | color: #ccc !important; | |
| 58 | + | .toolbarButton > svg path { | |
| 59 | + | fill: #ffffff !important; | |
| 42 | 60 | } | |
| 43 | 61 | ||
| 44 | - | /* Dropdowns and inputs */ | |
| 62 | + | /* === Inputs and Dropdowns === */ | |
| 45 | 63 | .toolbarField, | |
| 46 | - | select { | |
| 47 | - | background-color: #2c2c2c !important; | |
| 48 | - | color: #ccc !important; | |
| 49 | - | border: 1px solid #555 !important; | |
| 50 | - | } | |
| 51 | - | ||
| 52 | - | /* Dialogs (e.g., password prompt) */ | |
| 53 | - | .dialog, | |
| 54 | - | .dialog .mainContainer { | |
| 55 | - | background-color: #292D32 !important; | |
| 56 | - | color: #ccc !important; | |
| 64 | + | select, | |
| 65 | + | #scaleSelect option, | |
| 66 | + | .dropdown button, | |
| 67 | + | .editorParamsLabel { | |
| 68 | + | background-color: var(--input-bg-color) !important; | |
| 69 | + | color: var(--text-color) !important; | |
| 57 | 70 | } | |
| 58 | 71 | ||
| 59 | - | /* Optional: Adjust loading bar (hidden usually) */ | |
| 60 | - | #loadingBar { | |
| 61 | - | background-color: #333 !important; | |
| 72 | + | /* Hover effects */ | |
| 73 | + | .dropdown button:hover { | |
| 74 | + | background-color: var(--loading-bar-color) !important; | |
| 62 | 75 | } | |
| 63 | 76 | ||
| 77 | + | /* === Labels, Page Counters === */ | |
| 64 | 78 | .toolbarLabel, | |
| 65 | 79 | #numPages, | |
| 66 | 80 | #pageNumber { | |
| 67 | - | color: #ccc !important; | |
| 81 | + | color: var(--text-color) !important; | |
| 68 | 82 | } | |
| 69 | 83 | ||
| 70 | - | /* Darken popup menus and drawers */ | |
| 71 | - | .doorHangerRight, | |
| 72 | - | .menu, | |
| 73 | - | .editorParamsToolbar, | |
| 74 | - | .menuContainer, | |
| 75 | - | .dropdownToolbarButton select { | |
| 76 | - | background-color: #292D32 !important; | |
| 77 | - | color: #ccc !important; | |
| 78 | - | border: 1px solid #555 !important; | |
| 79 | - | } | |
| 80 | - | ||
| 81 | - | /* Fix labels and inputs inside menus */ | |
| 82 | - | .editorParamsLabel, | |
| 83 | - | .dropdown button, | |
| 84 | - | #scaleSelect option { | |
| 85 | - | color: #ccc !important; | |
| 86 | - | } | |
| 87 | - | ||
| 88 | - | /* Better dark hover for dropdown buttons */ | |
| 89 | - | .dropdown button:hover { | |
| 90 | - | background-color: #333 !important; | |
| 84 | + | /* === Loading Bar === */ | |
| 85 | + | #loadingBar { | |
| 86 | + | background-color: var(--loading-bar-color) !important; | |
| 91 | 87 | } | |
| 92 | 88 | } | |
biscuide revised this gist . Go to revision
No changes
biscuide revised this gist . Go to revision
1 file changed, 92 insertions
userContent.css(file created)
| @@ -0,0 +1,92 @@ | |||
| 1 | + | @-moz-document regexp("^.*\.pdf(?:[?#].*)?$") { | |
| 2 | + | #viewerContainer > #viewer > .page > .canvasWrapper > canvas { | |
| 3 | + | filter: invert(100%); | |
| 4 | + | } | |
| 5 | + | ||
| 6 | + | /* Dark background behind PDF pages */ | |
| 7 | + | #outerContainer, | |
| 8 | + | #mainContainer, | |
| 9 | + | #viewerContainer, | |
| 10 | + | #sidebarContainer, | |
| 11 | + | #sidebarContent, | |
| 12 | + | #thumbnailView, | |
| 13 | + | #outlineView, | |
| 14 | + | #attachmentsView, | |
| 15 | + | #layersView { | |
| 16 | + | background-color: #292D32 !important; | |
| 17 | + | } | |
| 18 | + | ||
| 19 | + | /* Dark toolbar */ | |
| 20 | + | #toolbarContainer, | |
| 21 | + | .toolbar, | |
| 22 | + | #toolbarSidebar { | |
| 23 | + | background-color: #292D32 !important; | |
| 24 | + | color: #ccc !important; | |
| 25 | + | } | |
| 26 | + | ||
| 27 | + | .toolbarButton > svg path { | |
| 28 | + | fill: #ffffff !important; | |
| 29 | + | } | |
| 30 | + | ||
| 31 | + | /* Make toolbar icons white */ | |
| 32 | + | .toolbarButton > svg, | |
| 33 | + | .toolbarButton::before, | |
| 34 | + | .toolbarButton::after { | |
| 35 | + | filter: invert(100%) brightness(200%) !important; | |
| 36 | + | } | |
| 37 | + | ||
| 38 | + | /* Toolbar buttons */ | |
| 39 | + | .toolbarButton { | |
| 40 | + | background-color: transparent !important; | |
| 41 | + | color: #ccc !important; | |
| 42 | + | } | |
| 43 | + | ||
| 44 | + | /* Dropdowns and inputs */ | |
| 45 | + | .toolbarField, | |
| 46 | + | select { | |
| 47 | + | background-color: #2c2c2c !important; | |
| 48 | + | color: #ccc !important; | |
| 49 | + | border: 1px solid #555 !important; | |
| 50 | + | } | |
| 51 | + | ||
| 52 | + | /* Dialogs (e.g., password prompt) */ | |
| 53 | + | .dialog, | |
| 54 | + | .dialog .mainContainer { | |
| 55 | + | background-color: #292D32 !important; | |
| 56 | + | color: #ccc !important; | |
| 57 | + | } | |
| 58 | + | ||
| 59 | + | /* Optional: Adjust loading bar (hidden usually) */ | |
| 60 | + | #loadingBar { | |
| 61 | + | background-color: #333 !important; | |
| 62 | + | } | |
| 63 | + | ||
| 64 | + | .toolbarLabel, | |
| 65 | + | #numPages, | |
| 66 | + | #pageNumber { | |
| 67 | + | color: #ccc !important; | |
| 68 | + | } | |
| 69 | + | ||
| 70 | + | /* Darken popup menus and drawers */ | |
| 71 | + | .doorHangerRight, | |
| 72 | + | .menu, | |
| 73 | + | .editorParamsToolbar, | |
| 74 | + | .menuContainer, | |
| 75 | + | .dropdownToolbarButton select { | |
| 76 | + | background-color: #292D32 !important; | |
| 77 | + | color: #ccc !important; | |
| 78 | + | border: 1px solid #555 !important; | |
| 79 | + | } | |
| 80 | + | ||
| 81 | + | /* Fix labels and inputs inside menus */ | |
| 82 | + | .editorParamsLabel, | |
| 83 | + | .dropdown button, | |
| 84 | + | #scaleSelect option { | |
| 85 | + | color: #ccc !important; | |
| 86 | + | } | |
| 87 | + | ||
| 88 | + | /* Better dark hover for dropdown buttons */ | |
| 89 | + | .dropdown button:hover { | |
| 90 | + | background-color: #333 !important; | |
| 91 | + | } | |
| 92 | + | } | |
Newer
Older