php-debugger.github.io/src/css/custom.css at f2123f8fa44bb5d55b8ea788ed8457b1b480df43 · 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
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* PHP Debugger brand: primary red from the design mockups. */
:root {
  --ifm-color-primary: #e5322d;
  --ifm-color-primary-dark: #d42621;
  --ifm-color-primary-darker: #c8241f;
  --ifm-color-primary-darkest: #a51e1a;
  --ifm-color-primary-light: #e84b47;
  --ifm-color-primary-lighter: #e95854;
  --ifm-color-primary-lightest: #ee7f7c;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(229, 50, 45, 0.08);
  --phpdbg-surface: #f6f6f7;
  --phpdbg-card-border: #e6e6e8;
  --phpdbg-dark-panel: #111113;

  /* Theme-inverted surfaces (dark panel on light pages and vice versa),
     used by the navbar and the CTA banner. */
  --phpdbg-inverse-surface: #111113;
  --phpdbg-inverse-text: #ffffff;
  --phpdbg-inverse-muted: rgba(255, 255, 255, 0.75);

  /* Navbar is theme-inverted for contrast: dark bar on light pages. */
  --ifm-navbar-background-color: #111113;
  --ifm-navbar-link-color: rgba(255, 255, 255, 0.85);
  --ifm-navbar-link-hover-color: var(--ifm-color-primary);
}

[data-theme='dark'] {
  --ifm-color-primary: #ef4444;
  --ifm-color-primary-dark: #e5322d;
  --ifm-color-primary-darker: #d42621;
  --ifm-color-primary-darkest: #a51e1a;
  --ifm-color-primary-light: #f15b5b;
  --ifm-color-primary-lighter: #f36d6d;
  --ifm-color-primary-lightest: #f79191;
  --ifm-background-color: #0d0d0f;
  --ifm-background-surface-color: #131316;
  --docusaurus-highlighted-code-line-bg: rgba(239, 68, 68, 0.12);
  --phpdbg-surface: #17171a;
  --phpdbg-card-border: #26262b;
  --phpdbg-dark-panel: #131316;

  --phpdbg-inverse-surface: #f6f6f7;
  --phpdbg-inverse-text: #17171a;
  --phpdbg-inverse-muted: rgba(0, 0, 0, 0.65);

  /* ...and a light bar on dark pages. */
  --ifm-navbar-background-color: #f6f6f7;
  --ifm-navbar-link-color: #1c1c1f;
  --ifm-navbar-link-hover-color: var(--ifm-color-primary);
}

/* Make the color-mode toggle and hamburger follow the inverted navbar text color. */
.navbar {
  color: var(--ifm-navbar-link-color);
}

/* Navbar brand: the lockup image contains the full logo, title, and subtitle.
   The mocks show a tall navbar with a large lockup. */
:root {
  --ifm-navbar-height: 5.25rem;
}

.navbar__logo {
  height: 4rem;
}

.navbar__brand {
  margin-right: 2rem;
}


.navbar__link {
  font-weight: 500;
  position: relative;
}

/* Small red bottom border on hover (the mocks show it on the selected item;
   we show it on hover instead). */
.navbar__link::after {
  content: '';
  position: absolute;
  left: var(--ifm-navbar-item-padding-horizontal);
  right: var(--ifm-navbar-item-padding-horizontal);
  bottom: -0.35rem;
  height: 2px;
  background-color: var(--ifm-color-primary);
  transform: scaleX(0);
  transition: transform 0.15s ease-out;
}

.navbar__link:hover::after {
  transform: scaleX(1);
}

/* No persistent highlight: active items look like the rest, red is hover-only. */
.navbar__link--active {
  color: var(--ifm-navbar-link-color);
}

.navbar__link--active:hover {
  color: var(--ifm-navbar-link-hover-color);
}

/* Sidebar: small-caps category headers and a red-tinted active item, per the mocks. */
.theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ifm-color-emphasis-600);
}

.theme-doc-sidebar-item-category > .menu__list-item-collapsible:hover,
.theme-doc-sidebar-item-category
  > .menu__list-item-collapsible
  > .menu__link:hover {
  background: none;
  color: var(--ifm-color-primary);
}

.theme-doc-sidebar-item-link .menu__link {
  font-size: 0.9rem;
}

.theme-doc-sidebar-item-link .menu__link--active {
  background-color: rgba(229, 50, 45, 0.08);
}

[data-theme='dark'] .theme-doc-sidebar-item-link .menu__link--active {
  background-color: rgba(239, 68, 68, 0.12);
}

/* Content polish */
.markdown h1:first-child {
  font-size: 2.5rem;
}

article a {
  font-weight: 500;
}

.breadcrumbs__link {
  font-size: 0.8rem;
}

/* Anchor that src/theme/DocItem/Content puts on the page title, so the "on this
   page" title entry has something to link to. Docusaurus only gives its own
   headings the offset that clears the sticky navbar, so set it here too. */
#page-top {
  scroll-margin-top: calc(var(--ifm-navbar-height) + 1rem);
}