xref: /expo/docs/global-styles/extras.ts (revision ae642c8a) 
1import { css } from '@emotion/react';
2import { theme, typography } from '@expo/styleguide';
3import { darkTheme } from '@expo/styleguide-base';
4
5export const globalExtras = css`
6  html {
7    background: ${theme.background.default};
8  }
9
10  body {
11    ${typography.body.paragraph}
12    text-rendering: optimizeLegibility;
13    line-height: 1;
14  }
15
16  ::selection {
17    background-color: ${theme.palette.blue5};
18    color: ${theme.text.default};
19  }
20
21  ::-webkit-scrollbar {
22    width: 6px;
23    height: 6px;
24  }
25
26  ::-webkit-scrollbar-track {
27    background-color: transparent;
28    cursor: pointer;
29  }
30
31  ::-webkit-scrollbar-thumb {
32    background: ${theme.palette.gray5};
33    border-radius: 10px;
34  }
35
36  ::-webkit-scrollbar-thumb:hover {
37    background: ${theme.palette.gray6};
38  }
39
40  div[class*='Terminal'] > div {
41    ::-webkit-scrollbar-thumb {
42      background: ${darkTheme.icon.quaternary};
43    }
44
45    ::-webkit-scrollbar-thumb:hover {
46      background: ${darkTheme.icon.tertiary};
47    }
48  }
49
50  img {
51    max-width: 768px;
52    width: 100%;
53  }
54
55  img.wide-image {
56    max-width: 900px;
57  }
58
59  img[src*="https://placehold.it/15"]
60  {
61    width: 15px !important;
62    height: 15px !important;
63  }
64
65  .react-player > video {
66    outline: none;
67  }
68
69  .strike {
70    text-decoration: line-through;
71  }
72`;
73