Skip to content

Commit d6bd870

Browse files
useernameuseername
committed
Implement high contrast mode
1 parent 6429ccc commit d6bd870

File tree

2 files changed

+105
-21
lines changed

2 files changed

+105
-21
lines changed

‎web/pdf_viewer.css

+24-4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,26 @@
1616
@import url(annotation_layer_builder.css);
1717
@import url(xfa_layer_builder.css);
1818

19+
:root {
20+
--pdfViewer-padding-bottom: none;
21+
--page-margin: 1px auto -8px;
22+
--page-border: 9px solid transparent;
23+
--spreadHorizontalWrapped-margin-LR: -3.5px;
24+
}
25+
26+
@media screen and (forced-colors: active) {
27+
:root {
28+
--pdfViewer-padding-bottom: 9px;
29+
--page-margin: 9px auto 0;
30+
--page-border: none;
31+
--spreadHorizontalWrapped-margin-LR: 4.5px;
32+
}
33+
}
34+
35+
.pdfViewer {
36+
padding-bottom: var(--pdfViewer-padding-bottom);
37+
}
38+
1939
.pdfViewer .canvasWrapper {
2040
overflow: hidden;
2141
}
@@ -24,10 +44,10 @@
2444
direction: ltr;
2545
width: 816px;
2646
height: 1056px;
27-
margin: 1px auto -8px;
47+
margin: var(--page-margin);
2848
position: relative;
2949
overflow: visible;
30-
border: 9px solid transparent;
50+
border: var(--page-border);
3151
background-clip: content-box;
3252
border-image: url(images/shadow.png) 9 9 repeat;
3353
background-color: rgba(255, 255, 255, 1);
@@ -79,8 +99,8 @@
7999
.spread .page,
80100
.pdfViewer.scrollHorizontal .page,
81101
.pdfViewer.scrollWrapped .page {
82-
margin-left: -3.5px;
83-
margin-right: -3.5px;
102+
margin-left: var(--spreadHorizontalWrapped-margin-LR);
103+
margin-right: var(--spreadHorizontalWrapped-margin-LR);
84104
}
85105

86106
.pdfViewer.removePageBorders .spread .page,

‎web/viewer.css

+81-17
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,14 @@
3333
--scrollbar-color: auto;
3434
--scrollbar-bg-color: auto;
3535
--toolbar-icon-bg-color: rgba(0, 0, 0, 1);
36+
--toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
3637

3738
--sidebar-narrow-bg-color: rgba(237, 237, 240, 0.9);
3839
--sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
3940
--toolbar-bg-color: rgba(249, 249, 250, 1);
4041
--toolbar-border-color: rgba(204, 204, 204, 1);
4142
--button-hover-color: rgba(221, 222, 223, 1);
43+
--toggled-btn-color: rgba(0, 0, 0, 1);
4244
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
4345
--toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
4446
--dropdown-btn-bg-color: rgba(215, 215, 219, 1);
@@ -54,10 +56,12 @@
5456
--sidebaritem-bg-color: rgba(0, 0, 0, 0.15);
5557
--doorhanger-bg-color: rgba(255, 255, 255, 1);
5658
--doorhanger-border-color: rgba(12, 12, 13, 0.2);
57-
--doorhanger-hover-color: rgba(237, 237, 237, 1);
59+
--doorhanger-hover-color: rgba(12, 12, 13, 1);
60+
--doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
5861
--doorhanger-separator-color: rgba(222, 222, 222, 1);
62+
--overlay-button-border: 0 none;
5963
--overlay-button-bg-color: rgba(12, 12, 13, 0.1);
60-
--overlay-button-hover-color: rgba(12, 12, 13, 0.3);
64+
--overlay-button-hover-bg-color: rgba(12, 12, 13, 0.3);
6165

6266
--loading-icon: url(images/loading.svg);
6367
--treeitem-expanded-icon: url(images/treeitem-expanded.svg);
@@ -108,12 +112,14 @@
108112
--scrollbar-color: rgba(121, 121, 123, 1);
109113
--scrollbar-bg-color: rgba(35, 35, 39, 1);
110114
--toolbar-icon-bg-color: rgba(255, 255, 255, 1);
115+
--toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);
111116

112117
--sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
113118
--sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
114119
--toolbar-bg-color: rgba(56, 56, 61, 1);
115120
--toolbar-border-color: rgba(12, 12, 13, 1);
116121
--button-hover-color: rgba(102, 102, 103, 1);
122+
--toggled-btn-color: rgba(255, 255, 255, 1);
117123
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
118124
--toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
119125
--dropdown-btn-bg-color: rgba(74, 74, 79, 1);
@@ -129,10 +135,11 @@
129135
--sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
130136
--doorhanger-bg-color: rgba(74, 74, 79, 1);
131137
--doorhanger-border-color: rgba(39, 39, 43, 1);
132-
--doorhanger-hover-color: rgba(93, 94, 98, 1);
138+
--doorhanger-hover-color: rgba(249, 249, 250, 1);
139+
--doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
133140
--doorhanger-separator-color: rgba(92, 92, 97, 1);
134141
--overlay-button-bg-color: rgba(92, 92, 97, 1);
135-
--overlay-button-hover-color: rgba(115, 115, 115, 1);
142+
--overlay-button-hover-bg-color: rgba(115, 115, 115, 1);
136143

137144
/* This image is used in <input> elements, which unfortunately means that
138145
* the `mask-image` approach used with all of the other images doesn't work
@@ -141,6 +148,26 @@
141148
}
142149
}
143150

151+
@media screen and (forced-colors: active) {
152+
:root {
153+
--main-color: ButtonText;
154+
--button-hover-color: Highlight;
155+
--doorhanger-hover-bg-color: Highlight;
156+
--toolbar-icon-opacity: 1;
157+
--toolbar-icon-bg-color: ButtonText;
158+
--toolbar-icon-hover-bg-color: ButtonFace;
159+
--toggled-btn-color: HighlightText;
160+
--toggled-btn-bg-color: LinkText;
161+
--doorhanger-hover-color: ButtonFace;
162+
--doorhanger-border-color-whcm: 1px solid ButtonText;
163+
--doorhanger-triangle-opacity-whcm: 0;
164+
--overlay-button-border: 1px solid Highlight;
165+
--overlay-button-hover-bg-color: Highlight;
166+
--overlay-button-hover-color: ButtonFace;
167+
--field-border-color: ButtonText;
168+
}
169+
}
170+
144171
* {
145172
padding: 0;
146173
margin: 0;
@@ -224,10 +251,12 @@ select {
224251
html[dir="ltr"] #sidebarContainer {
225252
transition-property: left;
226253
left: calc(0px - var(--sidebar-width));
254+
border-right: var(--doorhanger-border-color-whcm);
227255
}
228256
html[dir="rtl"] #sidebarContainer {
229257
transition-property: right;
230258
right: calc(0px - var(--sidebar-width));
259+
border-left: var(--doorhanger-border-color-whcm);
231260
}
232261

233262
#outerContainer.sidebarResizing #sidebarContainer {
@@ -535,6 +564,7 @@ html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
535564

536565
.findbar label:hover,
537566
.findbar input:focus + label {
567+
color: var(--toggled-btn-color);
538568
background-color: var(--button-hover-color);
539569
}
540570

@@ -549,6 +579,7 @@ html[dir="rtl"] #findInput {
549579

550580
.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
551581
background-color: var(--toggled-btn-bg-color) !important;
582+
color: var(--toggled-btn-color);
552583
}
553584

554585
#findInput {
@@ -603,6 +634,7 @@ html[dir="rtl"] .secondaryToolbar {
603634
border-radius: 2px;
604635
box-shadow: 0 1px 5px var(--doorhanger-border-color),
605636
0 0 0 1px var(--doorhanger-border-color);
637+
border: var(--doorhanger-border-color-whcm);
606638
}
607639
.doorHanger:after,
608640
.doorHanger:before,
@@ -615,6 +647,7 @@ html[dir="rtl"] .secondaryToolbar {
615647
width: 0;
616648
position: absolute;
617649
pointer-events: none;
650+
opacity: var(--doorhanger-triangle-opacity-whcm);
618651
}
619652
.doorHanger:after,
620653
.doorHangerRight:after {
@@ -660,7 +693,7 @@ html[dir="ltr"] .doorHangerRight:before {
660693
background-color: rgba(217, 217, 217, 1);
661694
color: rgba(82, 82, 82, 1);
662695
text-align: center;
663-
padding: 3px 4px;
696+
padding: 4px 5px;
664697
margin: 5px;
665698
}
666699

@@ -727,13 +760,15 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
727760
width: 28px;
728761
height: 28px;
729762
}
730-
.overlayButton {
731-
background-color: var(--overlay-button-bg-color);
732-
}
733763

734764
.overlayButton:hover,
735765
.overlayButton:focus {
736-
background-color: var(--overlay-button-hover-color);
766+
background-color: var(--overlay-button-hover-bg-color);
767+
}
768+
769+
.overlayButton:hover > span,
770+
.overlayButton:focus > span {
771+
color: var(--overlay-button-hover-color);
737772
}
738773

739774
.toolbarButton > span {
@@ -826,13 +861,23 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
826861
}
827862
.secondaryToolbarButton:hover,
828863
.secondaryToolbarButton:focus {
829-
background-color: var(--doorhanger-hover-color);
864+
background-color: var(--doorhanger-hover-bg-color);
865+
color: var(--doorhanger-hover-color);
830866
}
831867

832868
.toolbarButton.toggled,
833869
.splitToolbarButton.toggled > .toolbarButton.toggled,
834870
.secondaryToolbarButton.toggled {
835871
background-color: var(--toggled-btn-bg-color);
872+
color: var(--toggled-btn-color);
873+
}
874+
875+
.secondaryToolbarButton.toggled::before {
876+
background-color: var(--toggled-btn-color);
877+
}
878+
879+
.toolbarButton.toggled::before {
880+
background-color: var(--toggled-btn-color);
836881
}
837882

838883
.toolbarButton.toggled:hover:active,
@@ -878,16 +923,20 @@ html[dir="ltr"] .dropdownToolbarButton > select {
878923
html[dir="rtl"] .dropdownToolbarButton > select {
879924
padding-right: 4px;
880925
}
881-
.dropdownToolbarButton > select:hover {
926+
.dropdownToolbarButton > select:hover,
927+
.dropdownToolbarButton > select:focus {
882928
background-color: var(--button-hover-color);
929+
color: var(--toggled-btn-color);
883930
}
884931

885-
.dropdownToolbarButton > select:focus {
886-
background-color: var(--button-hover-color);
932+
.dropdownToolbarButton > select:active {
933+
background-color: var(--toggled-btn-bg-color);
934+
color: var(--toggled-btn-color);
887935
}
888936

889937
.dropdownToolbarButton > select > option {
890938
background: var(--doorhanger-bg-color);
939+
color: var(--main-color);
891940
}
892941

893942
#customScaleOption {
@@ -921,12 +970,25 @@ html[dir="rtl"] .dropdownToolbarButton > select {
921970
mask-size: cover;
922971
}
923972

973+
.dropdownToolbarButton:hover::after,
974+
.dropdownToolbarButton:focus::after,
975+
.dropdownToolbarButton:active::after {
976+
background-color: var(--toolbar-icon-hover-bg-color);
977+
}
978+
924979
.toolbarButton::before {
925980
opacity: var(--toolbar-icon-opacity);
926981
top: 6px;
927982
left: 6px;
928983
}
929984

985+
.toolbarButton:hover::before,
986+
.toolbarButton:focus::before,
987+
.secondaryToolbarButton:hover::before,
988+
.secondaryToolbarButton:focus::before {
989+
background-color: var(--toolbar-icon-hover-bg-color);
990+
}
991+
930992
.secondaryToolbarButton::before {
931993
opacity: var(--doorhanger-icon-opacity);
932994
top: 5px;
@@ -1248,9 +1310,8 @@ html[dir="rtl"] .toolbarField[type="checkbox"] {
12481310

12491311
.toolbarLabel {
12501312
min-width: 16px;
1251-
padding: 6px;
1313+
padding: 7px;
12521314
margin: 2px;
1253-
border: 1px solid rgba(0, 0, 0, 0);
12541315
border-radius: 2px;
12551316
color: var(--main-color);
12561317
font-size: 12px;
@@ -1261,10 +1322,10 @@ html[dir="rtl"] .toolbarField[type="checkbox"] {
12611322
}
12621323

12631324
html[dir="ltr"] #numPages.toolbarLabel {
1264-
padding-left: 2px;
1325+
padding-left: 3px;
12651326
}
12661327
html[dir="rtl"] #numPages.toolbarLabel {
1267-
padding-right: 2px;
1328+
padding-right: 3px;
12681329
}
12691330

12701331
#thumbnailView {
@@ -1483,6 +1544,9 @@ html[dir="rtl"] .treeItemToggler::before {
14831544
width: auto;
14841545
margin: 3px 4px 2px !important;
14851546
padding: 2px 11px;
1547+
color: var(--main-color);
1548+
background-color: var(--overlay-button-bg-color);
1549+
border: var(--overlay-button-border) !important;
14861550
}
14871551

14881552
#overlayContainer {

0 commit comments

Comments
 (0)