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