react-pdf-viewer/rp-variables.css at main · react-pdf-kit/react-pdf-viewer · GitHub

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
111
112
.rp-theme-variables {
  /* Global */
  --rp-font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  --rp-primary-color: #34affc;
  --rp-border-radius: 4px;
  --rp-text-color: #1c2024;
  --rp-outline-color: var(--rp-primary-color);
  --rp-font-size: 16px;
  /* Drop zone mask */
  --rp-drop-mask-background-color: #fafafa;
  /* Loader */
  --rp-loader-backdrop-color: #ffffffcc;
  /* Icon */
  --rp-icon-disabled: #c6ccd2;
  --rp-icon-font-size: calc(var(--rp-font-size) * 1.25);
  /* Toolbar */
  --rp-toolbar-background: #e2e6e9;
  --rp-toolbar-border-color: #c6ccd2;
  --rp-toolbar-padding: 0.25rem;
  --rp-toolbar-gap: 0.25rem;
  --rp-toolbar-size: 48px;
  /* Sidebar */
  --rp-sidebar-width: 48px;
  /* Thumbnail */
  --rp-thumbnail-border-color: #e2e6e9;
  --rp-thumbnail-background-color: #ffffff;
  --rp-thumbnail-active-color: #00000033;
  --rp-thumbnail-padding-y: 16px;
  /* Button */
  --rp-button-hover-background: #0000001a;
  --rp-button-padding: 4px;
  /* Input */
  --rp-input-padding: 0.5rem;
  --rp-input-border-radius: calc(var(--rp-border-radius) + 2px);
  --rp-input-background-color: #ffffff;
  --rp-input-placeholder-color: #c6ccd2;
  /* Pages */
  --rp-pages-background-color: #ffffff;
  /* Annotations */
  --rp-annotation-layer__link-hover-background: rgba(255, 255, 0, 0.2);
  /* Dropdown */
  --rp-dropdown-background-color: #f1f2f4;
  --rp-dropdown-padding: 4px;
  --rp-dropdown-hover-background-color: #0000001a;
  --rp-dropdown-separator-color: #e2e6e9;
  --rp-dropdown-separator-margin: 4px;
  --rp-dropdown-padding-menu-item: 8px;
  --rp-dropdown-font-size: calc(var(--rp-font-size) * 0.875);
  --rp-dropdown-border-radius: calc(var(--rp-border-radius) + 2px);
  --rp-search-tool-dropdown-padding: 8px;
  /* Popover */
  --rp-popover-font-size: calc(var(--rp-font-size) * 0.875);
  --rp-popover-background-color: #f1f2f4;
  --rp-popover-color: #1c2024;
  --rp-popover-border-color: #e2e6e9;
  --rp-popover-border-radius: calc(var(--rp-border-radius) + 2px);
  /* Dialog */
  --rp-overlay-background-color: #000000cc;
  --rp-dialog-background-color: #f1f2f4;
  --rp-properties-divider-color: #e2e6e9;
  --rp-properties-divider-margin: 16px;
  --rp-property-item-gap: 12px;
  --rp-dialog-title-color: #1c2024;
  --rp-property-item-label-color: #596673;
  --rp-property-close-icon-size: calc(var(--rp-font-size) * 1.25);
  --rp-property-item-font-size: calc(var(--rp-font-size) * 0.875);
  --rp-property-item-font-weight: 400;
  --rp-dialog-title-font-size: calc(var(--rp-font-size) * 1.125);
  --rp-dialog-title-font-weight: 600;
  --rp-menu-item-icon-size: 16px;
  /* Print progress */
  --rp-print-progress-background: #f1f2f4ff;
  --rp-print-progress-color: #1c2024ff;
  /* Drop zone  */
  --rp-drop-zone-border: #c6ccd2;
  --rp-drop-zone-font-color: #8c99a6;
  --rp-drop-zone-font-size: calc(var(--rp-font-size) * 1.125);
  --rp-drop-zone-background-color: #fafafa;
  /* Checkbox */
  --rp-checkbox-border-radius: var(--rp-border-radius);
  --rp-checkbox-border-color: #e2e6e9;
  --rp-checkbox-indicator-color: white;
  /* Highlight */
  --rp-highlight-background-color: rgba(255, 255, 0, 1);
  --rp-text-layer-highlight-border-radius: var(--rp-border-radius);
  --rp-current-highlight-background-color: rgba(255, 0, 0, 1);
  /* Tooltip */
  --rp-tooltip-background-color: #1c2024;
  --rp-tooltip-border-radius: var(--rp-border-radius);
  --rp-tooltip-font-color: #ffffff;
  --rp-tooltip-font-size: 14px;
  --rp-tooltip-padding: 8px 8px;
  /* Password Modal */
  --rp-password-background-color: #ffffff;
  --rp-password-title-font-color: #1c2024;
  --rp-password-content-font-color: #596673;
  --rp-password-input-border-color: #e2e6e9;
  --rp-password-input-placeholder-color: #c6ccd2;
  --rp-password-input-font-color: #000000;
  --rp-password-button-background-color: #34affc;
  --rp-password-button-font-color: #ffffff;
  --rp-password-button-border-color: #0995ee;
  /* Container */
  --rp-container-focus-outline-width: 0px;
  --rp-container-focus-outline-color: var(--rp-primary-color);
  --rp-container-focus-outline-offset: 2px;
  /* Skip link */
  --rp-skip-link-font-size: 14px;
  --rp-skip-link-color: #ffffff;
  --rp-skip-link-background-color: #0075cb;
  --rp-skip-link-border-color: #005da5;
}