docsearch/packages/docsearch-css/src/_variables.css at b1b8efa2495881ae1c399b8ee4d6605d8196132b · algolia/docsearch · 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
/* Variables */

:root {
  --docsearch-primary-color: rgb(0, 61, 255);
  --docsearch-soft-primary-color: rgba(0, 61, 255, 0.1);
  --docsearch-subtle-color: rgb(214, 214, 231);
  --docsearch-text-color: #36395a;
  --docsearch-error-color: #ef5350;
  --docsearch-success-color: #e8f5e9;
  --docsearch-secondary-text-color: rgba(90, 94, 154, 1);
  --docsearch-background-color: rgb(245, 245, 250);
  --docsearch-spacing: 12px;
  --docsearch-icon-stroke-width: 1.4;
  --docsearch-focus-color: rgb(0, 95, 204);
  --docsearch-highlight-color: rgb(0, 61, 255);
  --docsearch-muted-color: rgba(150, 152, 195, 1);
  --docsearch-muted-color-darker: rgba(120, 122, 165, 0.25);
  --docsearch-icon-color: rgba(90, 94, 154, 1);
  --docsearch-container-background: rgba(101, 108, 133, 0.8);
  --docsearch-logo-color: rgba(0, 61, 255, 1);
  --docsearch-border-radius: 4px;

  /* modal */
  --docsearch-modal-width: 800px;
  --docsearch-modal-height: 600px;
  --docsearch-modal-background: rgb(245, 246, 247);
  --docsearch-modal-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

  /* searchbox */
  --docsearch-searchbox-height: 56px;
  --docsearch-searchbox-initial-height: 56px;
  --docsearch-searchbox-background: #ffffffa6;
  --docsearch-searchbox-focus-background: #ffffffa6;
  --docsearch-actions-width: 99px;
  --docsearch-actions-height: 44px;

  /* hit */
  --docsearch-hit-height: 56px;
  --docsearch-hit-color: rgb(68, 73, 80);
  --docsearch-hit-highlight-color: rgba(0, 61, 255, 0.1);
  --docsearch-hit-background: #fff;

  /* key */
  --docsearch-key-background: rgb(245, 245, 250);
  --docsearch-key-color: rgba(90, 94, 154, 1);
  --docsearch-key-pressed-shadow: inset 0 2px 4px rgba(120, 122, 165, 0.25);

  /* footer */
  --docsearch-footer-height: 52px;
  --docsearch-footer-background: #ffffffa6;
  --docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232),
    0 -3px 6px 0 rgba(69, 98, 155, 0.12);

  /* animations */
  --fav-out-dur: 160ms;
  --del-dur: 150ms;

  --ease-smooth: cubic-bezier(0.25, 0.8, 0.4, 1);
  --ease-fast: cubic-bezier(0.45, 0.15, 0.6, 0.9);
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shimmer-bg: linear-gradient(
    90deg,
    rgb(224, 227, 232) 0%,
    var(--docsearch-muted-color) 20%,
    var(--docsearch-muted-color) 60%,
    rgb(224, 227, 232) 95%
  );

  --docsearch-dropdown-menu-background: var(--docsearch-hit-background);
  --docsearch-dropdown-menu-item-hover-background: var(--docsearch-modal-background);
}

/* Darkmode */

html[data-theme='dark'] {
  --docsearch-text-color: rgba(196, 199, 220, 1);
  --docsearch-secondary-text-color: rgba(182, 183, 213, 1);
  --docsearch-subtle-color: rgba(33, 33, 57, 1);
  --docsearch-error-color: #ef5350;
  --docsearch-success-color: rgba(67, 160, 71, 0.2);
  --docsearch-highlight-color: rgba(69, 122, 255, 1);
  --docsearch-focus-color: rgb(154, 200, 255);
  --docsearch-background-color: rgba(54, 57, 90, 1);
  --docsearch-icon-color: rgba(182, 183, 213, 1);
  --docsearch-container-background: rgba(9, 10, 17, 0.8);
  --docsearch-modal-background: rgb(21, 23, 42);
  --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
    0 3px 8px 0 rgb(0, 3, 9);
  --docsearch-searchbox-background: #000000a6;
  --docsearch-searchbox-focus-background: #000000a6;
  --docsearch-hit-color: rgb(190, 195, 201);
  --docsearch-hit-shadow: none;
  --docsearch-hit-background: rgb(9, 10, 17);
  --docsearch-key-background: rgba(54, 57, 90, 1);
  --docsearch-key-color: rgba(182, 183, 213, 1);
  --docsearch-key-pressed-shadow: inset 0 2px 4px rgba(12, 13, 20, 0.4);
  --docsearch-footer-background: #000000a6;
  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
  --docsearch-logo-color: rgb(255, 255, 255);
  --docsearch-muted-color: rgb(127, 132, 151);
  --shimmer-bg: linear-gradient(
    90deg,
    rgb(224, 227, 232) 0%,
    var(--docsearch-muted-color) 20%,
    var(--docsearch-muted-color) 60%,
    rgb(224, 227, 232) 95%
  );
  --docsearch-dropdown-menu-item-hover-background: #10121e;
}