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
102
103.bg-surface {
104  background: $card-bg !important;
105}
106
107.bg-surface-2 {
108  background: #18160f !important;
109}
110
111.bg-deep {
112  background: #09080626 !important;
113}
114
115.bg-deep,
116.bg-black {
117  background-color: #090806 !important;
118}
119
120.border-subtle {
121  border-color: rgba(107, 158, 120, 0.1) !important;
122}
123
124.text-muted {
125  color: $gray-300 !important;
126}
127
128.text-green {
129  color: $green-bright !important;
130}
131
132.text-amber {
133  color: $amber !important;
134}
135
136.text-terracotta {
137  color: #d88870 !important;
138}
139
140.property-url-link {
141  display: inline-flex;
142  align-items: center;
143  gap: 0.45rem;
144  max-width: 100%;
145  padding: 0.32rem 0.7rem;
146  background: rgba(107, 158, 120, 0.06);
147  border: 1px solid rgba(107, 158, 120, 0.18);
148  border-radius: 3px;
149  font-family: $font-family-monospace;
150  font-size: 0.88rem;
151  color: $green-bright !important;
152  text-decoration: none;
153  transition: border-color 200ms ease, background 200ms ease;
154
155  .property-url-text {
156    overflow: hidden;
157    text-overflow: ellipsis;
158    white-space: nowrap;
159    min-width: 0;
160  }
161
162  .property-url-arrow {
163    color: rgba(125, 184, 140, 0.55);
164    flex-shrink: 0;
165  }
166
167  &:hover {
168    border-color: rgba(107, 158, 120, 0.4);
169    background: rgba(107, 158, 120, 0.1);
170
171    .property-url-arrow { color: $green-bright; }
172  }
173}
174
175
176.link-footer {
177  color: $gray-400;
178  text-decoration: none;
179  transition: color 200ms ease;
180
181  &:hover {
182    color: $white;
183  }
184}
185
186.breadcrumb {
187  display: block;
188  flex-wrap: nowrap;
189  white-space: nowrap;
190  margin-bottom: 0;
191
192  .breadcrumb-item {
193    font-size: 0.82em;
194    white-space: nowrap;
195    display: inline-block;
196
197    a {
198      color: $gray-400;
199      text-decoration: none;
200      transition: color 150ms ease;
201
202      &:hover {
203        color: $green-bright;
204      }
205    }
206
207    &.active {
208      color: $gray-200;
209    }
210  }
211}
212
213.btn {
214  letter-spacing: 0.02em;
215  font-weight: 500;
216  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
217}
218
219.btn-primary {
220  color: #0b0a08;
221  background: $green;
222  border-color: $green;
223
224  &:hover,
225  &:focus {
226    color: #0b0a08;
227    background: $green-bright;
228    border-color: $green-bright;
229  }
230}
231
232.btn-success {
233  color: #0b0a08;
234  background: $green;
235  border-color: $green;
236
237  &:hover,
238  &:focus {
239    color: #0b0a08;
240    background: $green-bright;
241    border-color: $green-bright;
242  }
243}
244
245.btn-outline-light {
246  border-color: rgba(221, 215, 205, 0.28);
247  color: $gray-100;
248
249  &:hover,
250  &:focus {
251    background: rgba(221, 215, 205, 0.05);
252    border-color: rgba(221, 215, 205, 0.35);
253    color: $white;
254  }
255}
256
257.btn-outline-danger {
258  color: $terracotta;
259  border-color: $terracotta-border;
260
261  &:hover,
262  &:focus {
263    background: $terracotta-dim;
264    color: #d88870;
265    border-color: rgba(196, 112, 85, 0.4);
266  }
267}
268
269.btn-link {
270  color: $green-bright;
271}
272
273.alert { border-radius: $border-radius; }
274
275.alert-info {
276  background: rgba(126, 170, 184, 0.08);
277  border-color: rgba(126, 170, 184, 0.2);
278  color: #9ec5d2;
279}
280
281.alert-warning {
282  background: $amber-dim;
283  border-color: $amber-border;
284  color: #ddc06a;
285}
286
287.alert-danger {
288  background: $terracotta-dim;
289  border-color: $terracotta-border;
290  color: #e38871;
291}
292
293.alert-success {
294  background: $green-dim;
295  border-color: $green-border;
296  color: $green-bright;
297}
298
299.form-control,
300.form-select {
301  background-color: $input-bg;
302  border-color: $input-border-color;
303  color: $input-color;
304
305  &:focus {
306    background-color: $input-focus-bg;
307  }
308}
309
310.form-floating > label {
311  color: $gray-500;
312}
313
314.badge {
315  font-weight: 500;
316  letter-spacing: 0.04em;
317  padding: 0.35em 0.55em;
318}
319
320.page-link {
321  background: $card-bg;
322  border-color: $card-border-color;
323  color: $gray-300;
324
325  &:hover {
326    background: #1a1812;
327    border-color: $green-border;
328    color: $green-bright;
329  }
330}
331
332.page-item.active .page-link {
333  background: $green-dim;
334  border-color: $green-border;
335  color: $green-bright;
336}
337
338.page-item.disabled .page-link {
339  background: $card-bg;
340  border-color: $card-border-color;
341  color: #4a443c;
342}