first commit

src/configuration-component.ts

@@ -137,6 +137,7 @@ export class ConfigurationComponent {
         <option value="dark-blue">Dark Blue</option>
         <option value="photon-dark">Photon Dark</option>
         <option value="boxy-light">Boxy Light</option>
+        <option value="nella-red">Nella Red</option>
       </select>
 
       <h3 id="heading-enable">Enable Utterances</h3>

src/stylesheets/themes/nella-red/button.scss

@@ -0,0 +1,85 @@
+.btn-primary {
+  display: inline-block;
+  padding: 5px 8px;
+  background: $red-normal;
+  border-bottom: 4px solid $red-dark;
+  border-right: 4px solid $red-dark;
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  font-weight: 600;
+  font-size: 16px;
+  position: relative;
+  height: 34px;
+  line-height: 20px;
+  outline-width: 0px;
+  vertical-align: middle;
+  color: $white;
+}
+
+.btn-primary:hover {
+  display: inline-block;
+  padding: 5px 8px;
+  background: $red-light;
+  border-bottom: 4px solid $red-dark;
+  border-right: 4px solid $red-dark;
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  font-weight: 600;
+  font-size: 16px;
+  position: relative;
+  height: 34px;
+  line-height: 20px;
+  outline-width: 0px;
+  vertical-align: middle;
+  color: $white;
+}
+
+.btn-primary:active {
+  display: inline-block;
+  padding: 5px 8px;
+  background: $red-dark2;
+  border-bottom: 4px solid $red-dark;
+  border-right: 4px solid $red-dark;
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  font-weight: 600;
+  font-size: 16px;
+  position: relative;
+  height: 34px;
+  line-height: 20px;
+  outline-width: 0px;
+  vertical-align: middle;
+  color: $white;
+}
+
+.btn-primary:disabled {
+  background: $red-normal;
+  opacity: 0.4;
+}
+
+.btn-outline {
+    color: $gray-dark;
+    background: none;
+    line-height: 24px;
+    vertical-align: middle;
+    border-width: 0px;
+}
+
+.btn-outline:hover {
+    color: $white;
+    background-color: $red-normal;
+    transform: none;
+    border-width: 0px;
+}
+
+.btn-outline:disabled {
+    color: $gray-dark;
+    background: none;
+    border-width: 0px;
+}

src/stylesheets/themes/nella-red/font.scss

@@ -0,0 +1,4 @@
+body, .markdown-body, .textarea {
+    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Source Han Sans CN', 'Source Han Serif', 'Songti SC', serif;
+    font-size: 16px!important;
+}

src/stylesheets/themes/nella-red/index.scss

@@ -0,0 +1,4 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";

src/stylesheets/themes/nella-red/misc.scss

@@ -0,0 +1,33 @@
+.timeline summary:hover {
+    color: $red-light;
+}
+
+.timeline a {
+    text-decoration: none;
+}
+
+.markdown-body a {
+    color: $red-light;
+}
+
+.timeline-comment button {
+    font-size: 14px;
+}
+
+.timeline-comment textarea {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.comment-footer {
+    border: 1px solid $gray!important;
+    line-height: 25px;
+}
+
+.timeline-header em {
+    display: none;
+}
+
+.timeline-header .text-link {
+    font-style: italic;
+}

src/stylesheets/themes/nella-red/syntax.scss

@@ -0,0 +1 @@
+@import "github-syntax-light/lib/github-light";

src/stylesheets/themes/nella-red/utterances.scss

@@ -0,0 +1,6 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";
+@import "./font.scss";
+@import "./misc.scss"

src/stylesheets/themes/nella-red/variables.scss

@@ -0,0 +1,19 @@
+$white: #ffffff;
+$black: #000000;
+$gray: #eeeeee;
+$gray-dark: #999999;
+$red-dark: #5E0001;
+$red-dark2: #940002;
+$red-normal: #B40203;
+$red-light: #C80004;
+
+$bg-white: $white;
+$bg-gray: $white;
+$bg-gray-light: $white;
+$border-gray: $gray;
+$border-gray-dark: $gray;
+$text-gray: $black;
+$text-gray-dark: $black;
+$button-normal: $red-normal;
+$button-hover: $red-light;
+$button-pressed: $red-dark;