selection.js/src/selection.css at master · alexherbo2/selection.js · 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
/* Dracula theme – https://draculatheme.com */

:root {
  /* Color palette */
  /* https://github.com/dracula/dracula-theme#color-palette */
  --green: hsl(135, 94%, 65%);
  --pink: hsl(326, 100%, 74%);
  --purple: hsl(265, 89%, 78%);
  --green-transparent: hsla(135, 94%, 65%, 0.1);
  --pink-transparent: hsla(326, 100%, 74%, 0.1);
  --purple-transparent: hsla(265, 89%, 78%, 0.1);

  /* Theme */
  --primary-selection-border: var(--pink);
  --primary-selection-background: var(--pink-transparent);
  --secondary-selection-border: var(--purple);
  --secondary-selection-background: var(--purple-transparent);
  --primary-phantom-border: var(--green);
  --primary-phantom-background: var(--green-transparent);
  --secondary-phantom-border: var(--green);
  --secondary-phantom-background: var(--green-transparent);
}

.primary-selection, .secondary-selection, .primary-phantom, .secondary-phantom {
  box-shadow: 0 3px 1px -2px hsla(0, 0%, 0%, 0.2), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14), 0 1px 5px 0 hsla(0, 0%, 0%, 0.12) !important;
}

.primary-selection {
  outline: var(--primary-selection-border) solid 2px !important;
  background-color: var(--primary-selection-background) !important;
}

.secondary-selection {
  outline: var(--secondary-selection-border) dotted 2px !important;
  background-color: var(--secondary-selection-background) !important;
}

:root.primary-selection {
  margin: 2px !important;
}

.primary-phantom {
  outline: var(--primary-phantom-border) solid 2px !important;
  background-color: var(--primary-phantom-background) !important;
}

.secondary-phantom {
  outline: var(--secondary-phantom-border) dotted 2px !important;
  background-color: var(--secondary-phantom-background) !important;
}

:root.primary-phantom {
  margin: 2px !important;
}

/* Overlapping selections (selections on phantoms) */
.primary-selection.primary-phantom, .primary-selection.secondary-phantom {
  outline: var(--primary-selection-border) solid 2px !important;
  background-color: var(--primary-selection-background) !important;
}

.secondary-selection.primary-phantom, .secondary-selection.secondary-phantom {
  outline: var(--secondary-selection-border) dotted 2px !important;
  background-color: var(--secondary-selection-background) !important;
}