1.application-theme {
2  $ui-dark-bg: #2e2e2e;
3  $ui-light-bg: #dfdfdf;
4  $ui-dark-mode-bg: #1f1f1f;
5
6  .preview {
7    font-size: 0;
8    height: 48px;
9    border-radius: 4px;
10    min-width: 112px;
11    margin-bottom: $gl-padding-8;
12
13    &.ui-indigo {
14      background-color: $indigo-900;
15    }
16
17    &.ui-light-indigo {
18      background-color: $indigo-700;
19    }
20
21    &.ui-blue {
22      background-color: $theme-blue-900;
23    }
24
25    &.ui-light-blue {
26      background-color: $theme-light-blue-700;
27    }
28
29    &.ui-green {
30      background-color: $theme-green-900;
31    }
32
33    &.ui-light-green {
34      background-color: $theme-light-green-700;
35    }
36
37    &.ui-red {
38      background-color: $theme-red-900;
39    }
40
41    &.ui-light-red {
42      background-color: $theme-light-red-700;
43    }
44
45    &.ui-dark {
46      background-color: $ui-dark-bg;
47      border: solid 1px $border-color;
48    }
49
50    &.ui-light {
51      background-color: $ui-light-bg;
52    }
53
54    &.gl-dark {
55      background-color: $ui-dark-mode-bg;
56      border: solid 1px $border-color;
57    }
58  }
59
60  .preview-row {
61    display: block;
62  }
63}
64
65.syntax-theme {
66  label {
67    margin-right: $gl-padding-32;
68    margin-bottom: $gl-padding;
69    text-align: center;
70
71    .preview {
72      margin-bottom: 10px;
73      width: 160px;
74
75      img {
76        border-radius: 4px;
77        max-width: 100%;
78      }
79    }
80  }
81}
82