php-debugger.github.io/src/components/InstallCommand/styles.module.css at 47cf25d34407be9f31539ac044ae50649850c836 · php-debugger/php-debugger.github.io · 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
.wrapper {
  margin-bottom: 1.5rem;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tab {
  border: 1px solid var(--phpdbg-card-border);
  background: transparent;
  color: var(--ifm-color-emphasis-700);
  border-radius: 0.5rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.tab:hover {
  border-color: var(--ifm-color-primary);
  color: var(--ifm-color-primary);
}

.tabActive,
.tabActive:hover {
  border-color: var(--ifm-color-primary);
  background: var(--ifm-color-primary);
  color: #fff;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--phpdbg-card-border);
  background: transparent;
  color: var(--ifm-color-emphasis-700);
  border-radius: 0.5rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

/* Hover stays deliberately neutral. The brand red is what the tabs beside this
   button use to mean "selected", so an accented Copy button reads as still being
   active -- which is exactly how it looked after a click, with the pointer still
   resting on it. The accent is reserved for the moment the copy succeeds. */
.copy:hover {
  border-color: var(--ifm-color-emphasis-400);
  color: var(--ifm-color-emphasis-800);
}

.copied,
.copied:hover {
  border-color: var(--ifm-color-primary);
  color: var(--ifm-color-primary);
}

/* Docusaurus floats its own copy and word-wrap buttons over the top-right of the
   block. The install command is one long line, so it runs underneath them however
   far it is scrolled. Copy lives in the bar above instead, and the command wraps
   so all of it is readable without scrolling sideways. */
.wrapper :global(div[class*='buttonGroup']) {
  display: none;
}

.wrapper :global(pre code) {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}