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  $table-color: $table-color,
 76  $table-border-color: $table-border-color,
 77  $table-striped-color: $table-striped-color,
 78  $table-striped-bg: $table-striped-bg,
 79  $table-active-color: $table-active-color,
 80  $table-active-bg: $table-active-bg,
 81  $table-hover-color: $table-hover-color,
 82  $table-hover-bg: $table-hover-bg,
 83
 84  $breadcrumb-active-color: $breadcrumb-active-color,
 85  $breadcrumb-divider-color: $breadcrumb-divider-color,
 86
 87  $dropdown-bg: $dropdown-bg,
 88  $dropdown-border-color: $dropdown-border-color,
 89  $dropdown-color: $dropdown-color,
 90  $dropdown-link-color: $dropdown-link-color,
 91  $dropdown-link-hover-color: $dropdown-link-hover-color,
 92  $dropdown-link-hover-bg: $dropdown-link-hover-bg,
 93
 94  $btn-close-color: $btn-close-color,
 95);
 96
 97
 98.bg-surface {
 99  background: #13120e !important;
100}
101
102.bg-deep {
103  background: #090806 !important;
104}
105
106.text-muted {
107  color: #9e968a !important;
108}
109
110.link-footer {
111  color: $gray-400;
112  text-decoration: none;
113  transition: color 200ms ease;
114
115  &:hover {
116    color: $white;
117  }
118}
119
120.breadcrumb {
121  display: block;
122  flex-wrap: nowrap;
123  white-space: nowrap;
124
125  .breadcrumb-item {
126    font-size: 0.82em;
127    white-space: nowrap;
128    display: inline-block;
129
130    a {
131      color: $gray-400;
132      text-decoration: none;
133      transition: color 150ms ease;
134
135      &:hover {
136        color: $gray-100;
137      }
138    }
139
140    &.active {
141      color: $gray-200;
142    }
143  }
144}
145
146.btn-tag {
147  background: $green-dim;
148  color: $green-bright;
149  border: 1px solid $green-border;
150  font-size: 0.75rem;
151  font-weight: 500;
152  letter-spacing: 0.03em;
153  line-height: 1;
154  padding: 0.35rem 0.65rem;
155  display: inline-flex;
156  align-items: center;
157  transition: all 200ms ease;
158
159  &:hover {
160    background: rgba(107, 158, 120, 0.2);
161    color: #95cca2;
162    border-color: rgba(107, 158, 120, 0.35);
163    box-shadow: 0 0 8px rgba(107, 158, 120, 0.12);
164  }
165}
166
167.alert-info {
168  background: rgba(126, 170, 184, 0.08);
169  border-color: rgba(126, 170, 184, 0.2);
170  color: #9ec5d2;
171}
172
173.alert-warning {
174  background: $amber-dim;
175  border-color: rgba(201, 168, 76, 0.2);
176  color: #ddc06a;
177}
178
179.list-group-header {
180  background: $amber-dim !important;
181  color: $amber !important;
182  font-weight: 600;
183  font-size: 0.72rem;
184  letter-spacing: 0.08em;
185  text-transform: uppercase;
186}
187
188.list-group-footer {
189  background: rgba(221, 215, 205, 0.02) !important;
190  color: $gray-400 !important;
191  transition: all 200ms ease;
192
193  &:hover {
194    background: rgba(221, 215, 205, 0.04) !important;
195    color: $gray-200 !important;
196  }
197}