-
Notifications
You must be signed in to change notification settings - Fork 6
/
gmail-high-contrast-restoration.txt
110 lines (101 loc) · 10.1 KB
/
gmail-high-contrast-restoration.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
! Title: Gmail Inbox High-Contrast Restoration
! Version: 0.4.2
! Expires: 7 days
! Description: This is a purely cosmetic list that restores the old gmail inbox styles, from before the 2022 change. It restores colors and sizes to their former high-contrast selves, and gets rid of the new low-contrast hard-to-read colors. Assorted other changes include restoring the Compose button color, restoring the default and high-contrast themes to their original colors, and restoring curved button radiuses to be approximately as round as they used to be. NOTE: a page refresh is sometimes required when switching themes; if the colors look weird, please refresh the page.
! Copyright: 2022 Haggai Nuchi
! License: MIT
! Apply to all themes
!! Fix rounded corners: email list
mail.google.com##.bkK > .nH:style(border-radius: 0px !important)
!! Fix colors, margin, border-radius for quick settings. Move 16px left margin into 8px padding left and right to avoid fat right sidebar
mail.google.com##.IU:style(border-radius: 0px !important; background-color: rgba(255, 255, 255, 0.9) !important; margin-left: 0px !important; padding-left: 8px !important; padding-right: 8px !important)
!! Fix font-size for "starred" "everything else" etc
mail.google.com##.qh:style(font-size: 14px !important)
!! Fix font and spacing
mail.google.com##.n3 > .CL > .CK, .TO .nU > .n0, .TO.nZ .nU > .n0, .ah9 > .CJ, .yW, .zA > .a4W, .aiD, .aeU .ma, .l6:style(letter-spacing: 0.2px !important)
mail.google.com##body, input, textarea, select:style(font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif !important)
mail.google.com##:not(.z0 > .L3, .Bn, .ha > .hP, .gH.acX > .L3.bsQ, .gH.acX > .L3.bsQ *, .amn > .ams, .T-I-atl, .T-I-atl *, .Q0, .Q0 *, .OD, .dt, .v .f1, .v .f1 *, .v .fZ, .v .fZ *, .Wr, .Wr *, .J-N, .J-N *, span[style*="font-family:"], font[face]):style(font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif !important)
!! Fix "Compose" button
mail.google.com##:is(:not(.aJu, .bym) > .aBO, .WR > .aic) .z0 > .L3:style(border-radius: 24px !important; height: 48px !important; !important; color: rgb(217, 48, 37) !important; background-color: white !important; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important)
mail.google.com##:is(:not(.aJu, .bym) > .aBO, .WR > .aic) .z0 > .L3:is(:active, :hover) :style(box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149) !important; background-color: #fafafb !important)
mail.google.com##:is(:not(.aJu, .bym) > .aBO, .WR > .aic) .z0 > .L3::before:style(filter: invert(17%) sepia(79%) saturate(4564%) hue-rotate(356deg) brightness(96%) contrast(77%);)
!! Fix pop-out reply inverted colors
mail.google.com##.nH .Hy .m:style(background-color: rgb(64, 64, 64) !important)
mail.google.com##.Hp:style(color: white !important)
mail.google.com##.zu:style(color: rgb(189, 193, 198) !important)
mail.google.com##.Hm:style(filter: invert(1))
!! Chrome only: fix nonzero-width scrollbar looking ugly with primary/promotions/etc tabs
mail.google.com##.tf::-webkit-scrollbar:style(width: 0px !important; height: 0px !important)
!! Fix too-rounded corners
!!! Fix reply/forward buttons
mail.google.com##.amr .amn > .ams:style(border: none !important)
mail.google.com##.amn > .ams:active:style(box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149) !important)
mail.google.com##.amn > .ams:style(border-radius: 4px !important; color: rgb(95, 99, 104) !important; box-shadow: inset 0 0 0 1px #dadce0 !important)
mail.google.com##.amn > .ams::after:style(border-radius: 4px !important)
!!! Fix send button
mail.google.com##.v7.T-I-atl:style(border-bottom-left-radius: 4px !important; border-top-left-radius: 4px !important)
mail.google.com##.T-I-atl:style(background-color: rgb(26, 115, 232) !important)
mail.google.com##.T-I-atl:hover:style(background-color: rgb(41, 123, 230) !important)
mail.google.com##.hG.T-I:style(border-bottom-right-radius: 4px !important; border-top-right-radius: 4px !important)
mail.google.com##.hG.T-I-atl:style(border-left-color: rgb(24, 90, 188) !important)
mail.google.com##.dC:style(border-radius: 4px !important)
!!! Fix send+archive button
mail.google.com##.gU .btA .Uo:style(border-radius: 4px !important)
!!! When send+archive active, fix send borders
mail.google.com##.gU .btA .v7.T-I:style(border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important)
mail.google.com##.btA .btz.T-I-ax7, .hG.v6.T-I-ax7:style(border-color: rgb(95, 99, 104) !important)
mail.google.com##.Up .BW + .dC, .dC .hG.v6.T-I-ax7:style(box-shadow: rgb(218, 220, 224) 0px 0px 0px 1px inset !important)
!!! Fix reply subwindow
mail.google.com##.HM .I5:style(border-radius: 8px !important)
!!! Fix quick settings "see all settings" button
mail.google.com##.Tj:style(border-radius: 4px !important)
! Email list
!! light email list background
mail.google.com##html:style(--inbox-tab-bg: rgba(255, 255, 255, 0.9); --read-mail-bg: rgba(242, 245, 245, 0.8); --unread-mail-bg: rgba(255, 255, 255, 0.9); --separator-box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122))
!! invert dark text if there's a dark background image or color, but light email list
mail.google.com##.ah9 > .CJ:matches-css(color: rgb(255, 255, 255)):upward(body):style(--dark-text-invert-filter: invert(1) brightness(1.5) drop-shadow(0 0 4px rgba(0,0,0,0.4)); --separator-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12))
!! dark email list background (overrides previous invert-text filter with a more specific css variable)
mail.google.com##.bzn .G-tF .T-Jo:matches-css(background-image:/check_box_\w*white/):upward(.bkL):style(--inbox-tab-bg: rgba(51, 51, 51, 0.9); --dark-text-invert-filter: none; --read-mail-bg: rgba(0, 0, 0, 0.8); --unread-mail-bg: rgba(51, 51, 51, 0.9))
!! Apply above email list fixes
mail.google.com##.bkK > .nH:style(background-color: transparent !important)
mail.google.com##.bkK > .nH table[id^=":"]:style(background-color: transparent !important)
mail.google.com##.bkK > .nH :is(.aKh, .qd):style(background-color: var(--inbox-tab-bg) !important)
mail.google.com##.yO:not(.x7, .aps):style(background-color: var(--read-mail-bg) !important)
mail.google.com##.zE:not(.x7):style(background-color: var(--unread-mail-bg) !important)
mail.google.com##:is(.G-Ni, .Wg, .l2, .aBS, .ar5):style(filter: var(--dark-text-invert-filter))
!! Horizontal separators
mail.google.com##.aiw, .G-atb::before, .Wg:style(box-shadow: var(--separator-box-shadow) !important)
! Sidebar
!! Detect and set values for themes. Use css vars for focus, hover, active, because uBO can't reliably use procedural filters for those
!!! Light theme: default
mail.google.com##html:style(--focus-box-bg: rgb(232, 234, 237); --hover-box-bg: rgb(241, 243, 244); --active-box-bg: rgb(232, 234, 237); --focus-inbox-text: rgb(32, 33, 36); --search-bar-bg: rgb(241, 243, 244); --collapsed-sidebar-bg: white)
!!! Dark theme
mail.google.com##.ah9 > .CJ:matches-css(color: rgb(255, 255, 255)):upward(body):style(--focus-box-bg: rgba(255, 255, 255, 0.3); --hover-box-bg: rgba(255,255,255,0.2); --active-box-bg: rgba(255, 255, 255, 0.3); --focus-inbox-text: rgb(255, 255, 255); --search-bar-bg: rgba(241,243,244,.24); --collapsed-sidebar-bg: rgb(97, 97, 97))
!!! Default theme
mail.google.com##.wl:matches-css(background-color: /rgba?\(246, 248, 252/) + .wq:matches-css(background-image: none) + .wp:matches-css(background-image: none):upward(body):style(--focus-inbox-bg: rgb(252, 232, 230); --focus-inbox-text: rgb(217, 48, 37); --focus-inbox-filter: invert(17%) sepia(79%) saturate(4564%) hue-rotate(356deg) brightness(96%) contrast(77%))
!!! unset inbox changes for white-bg themes?
mail.google.com##.wl:matches-css(background-color: /rgba?\(246, 248, 252/) ~ :is(.wp, .wq):matches-css(background-image: /url/):upward(body):style(--focus-inbox-bg: rgb(232, 234, 237); --focus-inbox-text: rgb(32, 33, 36); --focus-inbox-filter: none)
!!! High contrast theme
mail.google.com##.wl:matches-css(background-color: /238, 238, 238/):upward(body):style(--focus-box-bg: rgb(255, 255, 255); --hover-box-bg: rgb(253, 253, 253); --active-box-bg: rgb(255, 255, 255); --focus-box-shadow: rgb(170, 170, 170) 0px 0px 0px 1px inset)
!! Apply sidebar theme
mail.google.com##.nZ.aiq, .ol, .CL:not(.V6):focus, .n6 > span:focus:style(background-color: var(--focus-box-bg) !important; box-shadow: var(--focus-box-shadow, none) !important)
mail.google.com##.TO.NQ, .CL:not(.V6):hover, .n6 > span:hover:style(background-color: var(--hover-box-bg) !important)
mail.google.com##.TO.NQ:active, .CL:not(.V6):active, .n6 > span:active:style(background-color: var(--active-box-bg) !important)
mail.google.com##form.aJf:not([class*=" aJf gb_"]):style(background-color: var(--search-bar-bg) !important)
mail.google.com##.bhZ.bym:style(background-color: var(--collapsed-sidebar-bg) !important)
!!! Special case for active inbox
mail.google.com##.nZ.aBP:style(background-color: var(--focus-inbox-bg, var(--focus-box-bg)) !important)
mail.google.com##.nZ.aBP *:style(color: var(--focus-inbox-text) !important)
mail.google.com##.nZ.aBP .qj:style(filter: var(--focus-inbox-filter))
! Right sidebar border
mail.google.com##.bAw .brC-aMv-auO.brC-aT5-aOt-Jw:style(border-left: 1px solid rgba(255, 255, 255, 0.12) !important)
mail.google.com##.bAw .brC-aT5-aOt-Jw:style(border-left: 1px solid #f1f3f4 !important)
mail.google.com##.bAw .brC-aMv-bta.brC-aT5-aOt-Jw:style(border-left: 1px solid rgba(100,121,143,.12) !important)
! Ad-hoc fixes
!! ad-hoc for default and other white themes
mail.google.com##.wl:matches-css(background-color: /rgba?\(246, 248, 252/):style(filter: opacity(0))
mail.google.com##.wl:matches-css(background-color: /rgba?\(246, 248, 252/):upward(body):style(background-color: transparent !important)
mail.google.com##.wl:matches-css(background-color: /rgba?\(246, 248, 252/):upward(body) .bAw > [role] :style(background-color: transparent !important)
mail.google.com##.wl:matches-css(background-color: /rgba?\(246, 248, 252/):upward(2) tr.yO:not(.x7, .aps) :style(background-color: rgba(242, 245, 245, 0.8) !important)
!! ad-hoc fixes for high contrast
mail.google.com##.wl:matches-css(background-color: /238, 238, 238/):upward(2) tr.yO:not(.x7, .aps) :style(background-color: rgb(242, 243, 244) !important)