orchard

  1@use "variables" as *;
  2
  3@use "bootstrap/scss/bootstrap" with (
  4  $font-family-sans-serif: $font-family-sans-serif,
  5  $font-family-monospace: $font-family-monospace,
  6  $headings-font-family: $headings-font-family,
  7  $headings-font-weight: $headings-font-weight,
  8  $font-size-base: $font-size-base,
  9  $line-height-base: $line-height-base,
 10  $headings-line-height: $headings-line-height,
 11
 12  $white: $white,
 13  $gray-100: $gray-100,
 14  $gray-200: $gray-200,
 15  $gray-300: $gray-300,
 16  $gray-400: $gray-400,
 17  $gray-500: $gray-500,
 18  $gray-600: $gray-600,
 19  $gray-700: $gray-700,
 20  $gray-800: $gray-800,
 21  $gray-900: $gray-900,
 22  $black: $black,
 23
 24  $body-bg: $body-bg,
 25  $body-color: $body-color,
 26
 27  $primary: $primary,
 28  $secondary: $secondary,
 29  $success: $success,
 30  $info: $info,
 31  $warning: $warning,
 32  $danger: $danger,
 33  $light: $light,
 34  $dark: $dark,
 35
 36  $link-color: $link-color,
 37  $link-hover-color: $link-hover-color,
 38  $link-decoration: $link-decoration,
 39  $link-hover-decoration: $link-hover-decoration,
 40
 41  $border-color: $border-color,
 42  $border-radius: $border-radius,
 43  $border-radius-sm: $border-radius-sm,
 44  $border-radius-lg: $border-radius-lg,
 45
 46  $card-bg: $card-bg,
 47  $card-border-color: $card-border-color,
 48  $card-color: $card-color,
 49  $card-cap-bg: $card-cap-bg,
 50
 51  $input-bg: $input-bg,
 52  $input-color: $input-color,
 53  $input-border-color: $input-border-color,
 54  $input-focus-bg: $input-focus-bg,
 55  $input-focus-color: $input-focus-color,
 56  $input-focus-border-color: $input-focus-border-color,
 57  $input-focus-box-shadow: $input-focus-box-shadow,
 58  $input-placeholder-color: $input-placeholder-color,
 59
 60  $navbar-dark-color: $navbar-dark-color,
 61  $navbar-dark-hover-color: $navbar-dark-hover-color,
 62  $navbar-dark-active-color: $navbar-dark-active-color,
 63
 64  $list-group-bg: $list-group-bg,
 65  $list-group-border-color: $list-group-border-color,
 66  $list-group-hover-bg: $list-group-hover-bg,
 67  $list-group-action-color: $list-group-action-color,
 68  $list-group-action-hover-color: $list-group-action-hover-color,
 69  $list-group-action-active-bg: $list-group-action-active-bg,
 70  $list-group-action-active-color: $list-group-action-active-color,
 71  $list-group-active-bg: $list-group-active-bg,
 72  $list-group-active-border-color: $list-group-active-border-color,
 73  $list-group-active-color: $list-group-active-color,
 74
 75  $breadcrumb-active-color: $breadcrumb-active-color,
 76  $breadcrumb-divider-color: $breadcrumb-divider-color,
 77
 78  $dropdown-bg: $dropdown-bg,
 79  $dropdown-border-color: $dropdown-border-color,
 80  $dropdown-color: $dropdown-color,
 81  $dropdown-link-color: $dropdown-link-color,
 82  $dropdown-link-hover-color: $dropdown-link-hover-color,
 83  $dropdown-link-hover-bg: $dropdown-link-hover-bg,
 84
 85  $btn-close-color: $btn-close-color,
 86
 87  $modal-content-bg: $modal-content-bg,
 88  $modal-content-border-color: $modal-content-border-color,
 89  $modal-header-border-color: $modal-header-border-color,
 90  $modal-footer-border-color: $modal-footer-border-color,
 91  $modal-backdrop-bg: $modal-backdrop-bg,
 92  $modal-backdrop-opacity: $modal-backdrop-opacity,
 93
 94  $progress-bg: $progress-bg,
 95  $progress-bar-bg: $progress-bar-bg,
 96
 97  $table-bg: $table-bg,
 98  $table-color: $table-color,
 99  $table-border-color: $table-border-color,
100
101  $accordion-bg: $accordion-bg,
102  $accordion-border-color: $accordion-border-color,
103  $accordion-button-bg: $accordion-button-bg,
104  $accordion-button-active-bg: $accordion-button-active-bg,
105  $accordion-button-active-color: $accordion-button-active-color,
106  $accordion-button-focus-border-color: $accordion-button-focus-border-color,
107  $accordion-button-focus-box-shadow: $accordion-button-focus-box-shadow,
108);
109
110
111.bg-surface {
112  background: $card-bg !important;
113}
114
115.bg-surface-2 {
116  background: #18160f !important;
117}
118
119.bg-deep {
120  background: #09080626 !important;
121}
122
123.bg-deep,
124.bg-black {
125  background-color: #090806 !important;
126}
127
128.border-subtle {
129  border-color: rgba(107, 158, 120, 0.1) !important;
130}
131
132.text-muted {
133  color: $gray-300 !important;
134}
135
136.text-green {
137  color: $green-bright !important;
138}
139
140.text-amber {
141  color: $amber !important;
142}
143
144
145.link-footer {
146  color: $gray-400;
147  text-decoration: none;
148  transition: color 200ms ease;
149
150  &:hover {
151    color: $white;
152  }
153}
154
155.breadcrumb {
156  display: block;
157  flex-wrap: nowrap;
158  white-space: nowrap;
159  margin-bottom: 0;
160
161  .breadcrumb-item {
162    font-size: 0.82em;
163    white-space: nowrap;
164    display: inline-block;
165
166    a {
167      color: $gray-400;
168      text-decoration: none;
169      transition: color 150ms ease;
170
171      &:hover {
172        color: $green-bright;
173      }
174    }
175
176    &.active {
177      color: $gray-200;
178    }
179  }
180}
181
182.btn {
183  letter-spacing: 0.02em;
184  font-weight: 500;
185  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
186}
187
188.btn-primary {
189  color: #0b0a08;
190  background: $green;
191  border-color: $green;
192
193  &:hover,
194  &:focus {
195    color: #0b0a08;
196    background: $green-bright;
197    border-color: $green-bright;
198  }
199}
200
201.btn-success {
202  color: #0b0a08;
203  background: $green;
204  border-color: $green;
205
206  &:hover,
207  &:focus {
208    color: #0b0a08;
209    background: $green-bright;
210    border-color: $green-bright;
211  }
212}
213
214.btn-secondary {
215  color: $gray-200;
216  background: #1a1812;
217  border-color: rgba(107, 158, 120, 0.15);
218
219  &:hover,
220  &:focus {
221    color: $white;
222    background: #211e1a;
223    border-color: rgba(107, 158, 120, 0.25);
224  }
225}
226
227.btn-outline-light {
228  border-color: rgba(221, 215, 205, 0.28);
229  color: $gray-100;
230
231  &:hover,
232  &:focus {
233    background: rgba(221, 215, 205, 0.05);
234    border-color: rgba(221, 215, 205, 0.35);
235    color: $white;
236  }
237}
238
239.btn-outline-danger {
240  color: $terracotta;
241  border-color: $terracotta-border;
242
243  &:hover,
244  &:focus {
245    background: $terracotta-dim;
246    color: #d88870;
247    border-color: rgba(196, 112, 85, 0.4);
248  }
249}
250
251.btn-link {
252  color: $green-bright;
253}
254
255.alert { border-radius: $border-radius; }
256
257.alert-info {
258  background: rgba(126, 170, 184, 0.08);
259  border-color: rgba(126, 170, 184, 0.2);
260  color: #9ec5d2;
261}
262
263.alert-warning {
264  background: $amber-dim;
265  border-color: $amber-border;
266  color: #ddc06a;
267}
268
269.alert-danger {
270  background: $terracotta-dim;
271  border-color: $terracotta-border;
272  color: #e38871;
273}
274
275.alert-success {
276  background: $green-dim;
277  border-color: $green-border;
278  color: $green-bright;
279}
280
281.form-control,
282.form-select {
283  background-color: $input-bg;
284  border-color: $input-border-color;
285  color: $input-color;
286
287  &:focus {
288    background-color: $input-focus-bg;
289  }
290}
291
292.form-floating > label {
293  color: $gray-500;
294}
295
296.badge {
297  font-weight: 500;
298  letter-spacing: 0.04em;
299  padding: 0.35em 0.55em;
300}
301
302.page-link {
303  background: $card-bg;
304  border-color: $card-border-color;
305  color: $gray-300;
306
307  &:hover {
308    background: #1a1812;
309    border-color: $green-border;
310    color: $green-bright;
311  }
312}
313
314.page-item.active .page-link {
315  background: $green-dim;
316  border-color: $green-border;
317  color: $green-bright;
318}
319
320.page-item.disabled .page-link {
321  background: $card-bg;
322  border-color: $card-border-color;
323  color: #4a443c;
324}
325
326.accordion-button {
327  font-family: $font-family-monospace;
328  font-size: 0.85rem;
329  letter-spacing: 0.02em;
330  color: $gray-200;
331
332  &:not(.collapsed) {
333    box-shadow: inset 0 -1px 0 rgba(107, 158, 120, 0.12);
334  }
335}
336
337.accordion-body {
338  font-size: 0.88rem;
339  color: $gray-300;
340  line-height: 1.7;
341
342  textarea.form-control {
343    font-family: $font-family-monospace;
344    font-size: 0.78rem;
345    background: #090806;
346    color: $green-bright;
347    border-color: rgba(107, 158, 120, 0.15);
348  }
349}