Styles rewritten in a modular format with themable properties stored in variables.

src/web/html/index.html

@@ -38,7 +38,7 @@
             <span id="alert-content"></span>
         </div>
         <div id="content-wrapper">
-            <div id="banner" class="green">
+            <div id="banner">
                 <% if (htmlWebpackPlugin.options.inline) { %>
                     <span style="float: left; margin-left: 10px;">Compile time: <%= htmlWebpackPlugin.options.compileTime %></span>
                 <% } else { %>
@@ -57,7 +57,7 @@
                 <a href="#" id="support" class="banner-right" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
                 <a href="#" id="options" class="banner-right">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
             </div>
-            <div id="wrapper">
+            <div id="workspace-wrapper">
                 <div id="operations" class="split split-horizontal no-select">
                     <div class="title no-select">Operations</div>
                     <input type="search" class="form-control" id="search" placeholder="Search..." autocomplete="off">
@@ -163,6 +163,7 @@
                                 <input type="checkbox" id="save-link-recipe-checkbox" checked> <label for="save-link-recipe-checkbox"> Include recipe </label>
                                 <input type="checkbox" id="save-link-input-checkbox" checked> <label for="save-link-input-checkbox"> Include input </label>
                             </div>
+                            <br>
                             <a id="save-link" style="word-wrap: break-word;"></a>
                         </div>
                     </div>

src/web/stylesheets/components/_alert.scss

@@ -0,0 +1,22 @@
+/**
+ * Alert styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#alert {
+    position: fixed;
+    width: 30%;
+    margin: 30px auto;
+    top: 10px;
+    left: 0;
+    right: 0;
+    z-index: 2000;
+    display: none;
+}
+
+#alert a {
+    text-decoration: underline;
+}

src/web/stylesheets/components/_button.scss

@@ -0,0 +1,13 @@
+/**
+ * Button styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+button img,
+span.btn img {
+    margin-right: 3px;
+    margin-bottom: 1px;
+}

src/web/stylesheets/components/_list.scss

@@ -0,0 +1,13 @@
+/**
+ * Operation list styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.op-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}

src/web/stylesheets/components/_operation.scss

@@ -0,0 +1,193 @@
+/**
+ * Operation styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.operation {
+    cursor: pointer;
+    padding: 10px;
+    list-style-type: none;
+    position: relative;
+    border-width: 1px;
+    border-style: solid;
+    border-top-width: 0;
+}
+
+.arg-group {
+    display: table;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.arg-group-text {
+    display: block;
+}
+
+.inline-args {
+    float: left;
+    width: auto;
+    margin-right: 30px;
+    height: 34px;
+}
+
+.inline-args input[type="checkbox"] {
+    margin-top: 10px;
+}
+
+.inline-args input[type="number"] {
+    width: 100px;
+}
+
+.arg-title {
+    font-weight: $argTitleFontWeight;
+}
+
+.arg-input {
+    display: table-cell;
+    width: 100%;
+    padding: 6px 12px;
+    vertical-align: middle;
+    height: $argInputHeight;
+    font-size: $argInputFontSize;
+    line-height: $argInputLineHeight;
+    color: $argFontColour;
+    background-color: $argBackground;
+    border: 1px solid $primaryBorderColour;
+    font-family: $fixedWidthFontFamily;
+}
+
+.short-string {
+    width: 150px;
+}
+
+select {
+    display: block;
+    padding: 6px 8px;
+    height: 34px;
+    border: 1px solid $primaryBorderColour;
+    background-color: $argBackground;
+    color: $argFontColour;
+}
+
+.arg[disabled] {
+    cursor: not-allowed;
+    opacity: 1;
+    background-color: $argDisabledBackground;
+}
+
+textarea.arg {
+    width: 100%;
+    min-height: 50px;
+    height: 70px;
+    margin-top: 5px;
+    border: 1px solid $primaryBorderColour;
+    resize: vertical;
+    color: $argFontColour;
+    font-family: $fixedWidthFontFamily;
+}
+
+.arg-label {
+    display: table-cell;
+    width: 1px;
+    padding-right: 10px;
+    font-weight: normal;
+    vertical-align: middle;
+    white-space: pre;
+}
+
+.editable-option {
+    position: relative;
+    display: inline-block;
+}
+
+.editable-option-select {
+    min-width: 250px;
+}
+
+.editable-option-input {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: calc(100% - 20px);
+    height: calc(100% - 2px) !important;
+    border: none !important;
+}
+
+button.dropdown-toggle {
+    background-color: $secondaryBackgroundColour;
+}
+
+.op-icon {
+    float: right;
+    margin-left: 10px;
+    margin-top: 3px;
+}
+
+.recip-icons {
+    position: absolute;
+    top: 13px;
+    right: 10px;
+    height: 16px;
+}
+
+.recip-icon {
+    margin-right: 10px;
+    vertical-align: baseline;
+    float: right;
+}
+
+.disable-icon {
+    width: 16px;
+    height: 16px;
+    margin-top: -1px;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfElEQVQ4y6WTPWgTYRjHf8nlfVvuoDVIP4Yuki4WHKoUqggFRUTsUEGkVG2hmCq6OnTwIxYHB+eijZOKdLNDW1pKKyGigh8dBHUJElxyBgx3vEnukvdyDrUhRXDxGR+e/+/583xEwjDkfyIGwNVTzURm4tYAMA6MAoN/0tvAMrA48uL+l2bx4w0iYRjSuHKC6OnTZLqHk8CcaZq9bW1tSCkBqNVq+L5PpVIpAHdGfr5LN9bXiT7Z2nGgteb1/qFkLBJZ6OjowHEc8vk8pVIJgHg8TldXF52dnb2u6y5s7R/iuF5JSyAKkLl4eyAMwznLsrBtm1wu99Z13amk+BFJih8R13WXANrb27EsizAM5zIXbw+wC9Baj0spe5VSFAqFt4ZhXJ6ufXuK55E5cDKVSCTGenp6yGazKKWQUvZqrcebgCAIRqWUOI6DEOLR1K8POapVMgfPpoC7u2LLspYcx0FKSRAEo60OBg3DwPd9Jr5vPqWvj8zh83vEwL2J75vnfN/HMAy01oPNNQZBQBAEO1OvVsl0D/8lTuZfpYDd7gRBQKuD7XK5jGmarB679PIv8deVFJUKq8cuTZqmSblcRmu93QpYVkohhMCyrLE94n2/UlSrbJy5kRBCXBNCoJRCa73cClh0XbfgeR6WZZHNZunv719KvnmeYnWVVxdmJ2Ox2DMhxFHP83Bdt6C1XgR2LvHzQDvvb84npZQL8Xgc0zSJRqN7br7RaFCpVCiVStRqtZmhh9fTh754TQdMr82nPc+bsW27UCwWUUpRr9ep1+sopSgWi9i2XfA8b2Z6bT6ttabp4GMi0uz0aXbhn890+MFM85mO5MIdwP/Eb1pMUCdctYRzAAAAAElFTkSuQmCC') no-repeat;
+}
+
+.disable-icon-selected {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACFUlEQVR4XqWTP0tbURjGn9zY3mjBwsUhBQtS6XKxiNypIGZJ6SKYUYdaKWg7OrrE3pYO+Qit3dpFuuQO6lI7Z4nESQdjlJbkJh0MksSb3Jvk9H0gjZFu9YWH83LO7zn/3nNCSincJobAeP1sEDBFi6J50UyPy4l2RNuioz756Ts0tt1OB4jH2a52Ne2HGh9PwrJm2EcxZx/HyPRYMDgB2u02/N3d1c7w8BZMM1ptNJBPp3GwsUExB/s4RoYsPf0JOkFgdoH34YkJ/D48xC/HyTTOzl5ayWSIktwxqlVo0SjIkKWnP0Hg+4swjGitVMJFNpu5o+svptfXv6DZBDIZezoWS3Db3A0ZsvRcH8H354dGR9EoFHA3EvlorqycwvOAXM4G8Pav+f7YmEOGLD1gsIzl54+V+vBK/Yw9ZAv1LQW1FrdFSnKVfQTK5liPUfRI9I8ArqiPjLAF9vcHVybyzlpasgcZeq7voNXKNSsV3DMMXB4fp/8xLyzYuLri2DIZsvQM3sFOzXURiUR4zsQNcyrFleFVKpNyP2/IkKVnsArbF65bbkqplJSJZrl5x5qbs7G3h3artSyV+arr+lMyZOnpP2Wp6ZFos3R+vvUgCGDNzgKalkA4rECIr07662J2i0X4nrfJJ33jJT6Zmvpcr9XWCicn5WI+j7rrAmKgmLOPY2TI0sPgb8TBZOi/PpN1qnDr7/wH3jxgB/FKIXkAAAAASUVORK5CYII=') no-repeat;
+}
+
+.breakpoint {
+    float: right;
+    width: 14px;
+    height: 14px;
+    background-color: #eee;
+    border: 1px solid #aaa;
+}
+
+.breakpoint-selected {
+    background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEXIUkvzUVHzTEzzn5785eXrbW24BgbzWVnze3vzVVXzY2Pyion509PzbW3zXV1UMxj0l5f1srKbRTRgOxzJDg796ur74ODfIyP5zs6LLx3pNTXYGxuxdkVZNhn////sCC1eAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABWSURBVBjTnc+7EoAgDERRTOQVxMEZFAf//z8FjAUFDbfb060QU2FwxngimxnCea3bjegSgz+0tguAfBgIy64QGfZQdg91dgAtqUZgnfz6IacYVWvu2AvR4wNAv0nxrAAAAABJRU5ErkJggg==') no-repeat -2px -2px;
+}
+
+.break {
+    color: $breakpointFontColour !important;
+    background-color: $breakpointBgColour !important;
+    border-color: $breakpointBorderColour !important;
+}
+
+.selected-op {
+    color: $selectedOperationFontColor !important;
+    background-color: $selectedOperationBgColour !important;
+    border-color: $selectedOperationBorderColour !important;
+}
+
+.flow-control-op {
+    color: $fcOperationFontColour !important;
+    background-color: $fcOperationBgColour !important;
+    border-color: $fcOperationBorderColour !important;
+}
+
+.flow-control-op.break {
+    color: $fcBreakpointOperationFontColour !important;
+    background-color: $fcBreakpointOperationBgColour !important;
+    border-color: $fcBreakpointOperationBorderColour !important;
+}
+
+.disabled {
+    color: $disabledFontColour !important;
+    background-color: $disabledBgColour !important;
+    border-color: $disabledBorderColour !important;
+}

src/web/stylesheets/components/_pane.scss

@@ -0,0 +1,28 @@
+/**
+ * Workspace pane styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+$titleHeight: 43px;
+
+.title {
+    padding: 10px;
+    height: $titleHeight;
+    border-bottom: 1px solid $primaryBorderColour;
+    font-weight: $titleWeight;
+    color: $titleColour;
+    background-color: $secondaryBackgroundColour;
+}
+
+.list-area {
+    position: absolute;
+    top: $titleHeight;
+    bottom: 0;
+    width: 100%;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}

src/web/stylesheets/layout/_banner.scss

@@ -0,0 +1,28 @@
+/**
+ * Banner area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#banner {
+    position: absolute;
+    height: 30px;
+    width: 100%;
+    text-align: center;
+    line-height: 30px;
+    border-bottom: 1px solid $primaryBorderColour;
+    color: $bannerFontColour;
+    background-color: $bannerBgColour;
+}
+
+.banner-right {
+    float: right;
+    margin-right: 10px;
+}
+
+#banner img {
+    margin-bottom: 2px;
+    margin-left: 8px;
+}

src/web/stylesheets/layout/_controls.scss

@@ -0,0 +1,63 @@
+/**
+ * Controls area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+$controlsHeight: 120px;
+$controlsDivision: 65%;
+
+#controls {
+    position: absolute;
+    width: 100%;
+    height: $controlsHeight;
+    bottom: 0;
+    padding: 10px;
+    border-top: 1px solid $primaryBorderColour;
+    background-color: $secondaryBackgroundColour;
+}
+
+#operational-controls {
+    width: $controlsDivision;
+    float: left;
+    text-align: center;
+}
+
+#bake-group {
+    display: table;
+    width: 100%;
+}
+
+#bake {
+    display: table-cell;
+    width: 100%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+#auto-bake-label {
+    display: table-cell;
+    padding: 1px;
+    line-height: 1.35;
+    width: 60px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 1px solid #5cb85c;
+}
+
+#auto-bake-label:hover {
+    border-left-color: #398439;
+}
+
+#auto-bake-label div {
+    font-size: 10px;
+    padding: 2px;
+}
+
+#extra-controls {
+    float: right;
+    width: 100% - $controlsDivision;
+    padding-left: 10px;
+}

src/web/stylesheets/layout/_io.scss

@@ -1,41 +1,37 @@
-#content-wrapper {
+/**
-    position: absolute;
+ * Input/Output area styles
-    top: 0;
+ *
-    left: 0;
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.io-textarea {
+    position: relative;
     width: 100%;
     height: 100%;
+    margin: 0;
+    padding: 3px;
+    -moz-padding-start: 3px;
+    -moz-padding-end: 3px;
+    border: none;
+    border-width: 0px;
+    resize: none;
+    background-color: transparent;
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 
-#banner {
+#input-text,
-    position: absolute;
+#output-text {
-    height: 30px;
+    @extend .io-textarea;
-    width: 100%;
-    text-align: center;
-    line-height: 30px;
 }
 
-#wrapper {
+#output-html {
-    position: absolute;
+    @extend .io-textarea;
-    top: 30px;
+    display: none;
-    bottom: 0;
+    overflow-y: auto;
-    width: 100%;
+    -moz-padding-start: 1px; /* Fixes bug in Firefox */
-}
-
-div#operations,
-div#recipe {
-    width: 50%;
-    height: 100%;
-}
-
-div#input,
-div#output {
-    width: 100%;
-    height: 50%;
-}
-
-.title {
-    padding: 10px;
-    height: 43px;
 }
 
 .textarea-wrapper {
@@ -46,45 +42,11 @@ div#output {
     overflow: hidden;
 }
 
-textarea,
+.textarea-wrapper textarea,
-#output-html {
+.textarea-wrapper div {
-    width: 100%;
+    font-family: $fixedWidthFontFamily;
-    height: 100%;
+    font-size: $fixedWidthFontSize;
-    border: none;
+    color: $fixedWidthFontColour;
-    padding: 3px;
-    -moz-padding-start: 3px;
-    -moz-padding-end: 3px;
-}
-
-#input-text,
-#output-text,
-#output-html {
-    position: relative;
-    border-width: 0px;
-    margin: 0;
-    resize: none;
-    background-color: transparent;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-#output-html {
-    display: none;
-    overflow-y: auto;
-    -moz-padding-start: 1px; /* Fixes bug in Firefox */
-}
-
-.split {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    overflow: auto;
-    position: relative;
-}
-
-.split.split-horizontal, .gutter.gutter-horizontal {
-    height: 100%;
-    float: left;
 }
 
 #input-highlighter,
@@ -105,43 +67,6 @@ textarea,
     border: none;
 }
 
-#op-list,
-#rec-list {
-    position: absolute;
-    top: 43px;
-    bottom: 0;
-    width: 100%;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.op-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-#rec-list {
-    bottom: 120px; /* Linked to #controls height */
-    overflow: auto;
-}
-
-.operation {
-    cursor: pointer;
-    padding: 10px;
-    list-style-type: none;
-    position: relative;
-}
-
-#controls {
-    position: absolute;
-    width: 100%;
-    height: 120px;  /* Linked to #rec-list bottom */
-    bottom: 0;
-    padding: 10px;
-}
-
 .io-btn-group {
     float: right;
     margin-top: -4px;
@@ -154,279 +79,19 @@ textarea,
     height: 30px;
     text-align: right;
     line-height: 10px;
+    font-family: $fixedWidthFontFamily;
+    font-weight: normal;
+    font-size: 8pt;
 }
 
 #input-info {
     line-height: 15px;
 }
 
-.arg-group {
+.dropping-file {
-    display: table;
+    border: 5px dashed $dropFileBorderColour !important;
-    width: 100%;
-    margin-top: 10px;
-}
-
-.arg-group-text {
-    display: block;
-}
-
-.inline-args {
-    float: left;
-    width: auto;
-    margin-right: 30px;
-    height: 34px;
-}
-
-.inline-args input[type="checkbox"] {
-    margin-top: 10px;
-}
-
-.inline-args input[type="number"] {
-    width: 100px;
-}
-
-.arg-input {
-    display: table-cell;
-    width: 100%;
-    padding: 6px 12px;
-    vertical-align: middle;
-}
-
-.short-string {
-    width: 150px;
-}
-
-select {
-    display: block;
-    vertical-align: middle;
-}
-
-.arg[disabled] {
-    cursor: not-allowed;
-    opacity: 1;
-}
-
-textarea.arg {
-    width: 100%;
-    min-height: 50px;
-    height: 70px;
-    margin-top: 5px;
-    border: 1px solid #ddd;
-    resize: vertical;
-}
-
-.arg-label {
-    display: table-cell;
-    width: 1px;
-    padding-right: 10px;
-    font-weight: normal;
-    vertical-align: middle;
-    white-space: pre;
-}
-
-.editable-option {
-    position: relative;
-    display: inline-block;
-}
-
-.editable-option-select {
-    min-width: 250px;
-}
-
-.editable-option-input {
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: calc(100% - 20px);
-    height: calc(100% - 2px) !important;
-    border: none !important;
-}
-
-#operational-controls {
-    width: 65%; /* Linked to #extra-controls width */
-    float: left;
-    text-align: center;
-}
-
-#bake-group {
-    display: table;
-    width: 100%;
-}
-
-#bake {
-    display: table-cell;
-    width: 100%;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-#auto-bake-label {
-    display: table-cell;
-    padding: 1px;
-    line-height: 1.35;
-    width: 60px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: 1px solid #5cb85c;
-}
-
-#auto-bake-label:hover {
-    border-left-color: #398439;
-}
-
-#auto-bake-label div {
-    font-size: 10px;
-    padding: 2px;
-}
-
-#extra-controls {
-    float: right;
-    width: 35%; /* Linked to #operational-controls width */
-    padding-left: 10px;
-}
-
-.op-icon {
-    float: right;
-    margin-left: 10px;
-    margin-top: 3px;
-}
-
-.recip-icons {
-    position: absolute;
-    top: 13px;
-    right: 10px;
-    height: 16px;
-}
-
-.recip-icon {
-    margin-right: 10px;
-    vertical-align: baseline;
-    float: right;
-}
-
-.disable-icon {
-    width: 16px;
-    height: 16px;
-    margin-top: -1px;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfElEQVQ4y6WTPWgTYRjHf8nlfVvuoDVIP4Yuki4WHKoUqggFRUTsUEGkVG2hmCq6OnTwIxYHB+eijZOKdLNDW1pKKyGigh8dBHUJElxyBgx3vEnukvdyDrUhRXDxGR+e/+/583xEwjDkfyIGwNVTzURm4tYAMA6MAoN/0tvAMrA48uL+l2bx4w0iYRjSuHKC6OnTZLqHk8CcaZq9bW1tSCkBqNVq+L5PpVIpAHdGfr5LN9bXiT7Z2nGgteb1/qFkLBJZ6OjowHEc8vk8pVIJgHg8TldXF52dnb2u6y5s7R/iuF5JSyAKkLl4eyAMwznLsrBtm1wu99Z13amk+BFJih8R13WXANrb27EsizAM5zIXbw+wC9Baj0spe5VSFAqFt4ZhXJ6ufXuK55E5cDKVSCTGenp6yGazKKWQUvZqrcebgCAIRqWUOI6DEOLR1K8POapVMgfPpoC7u2LLspYcx0FKSRAEo60OBg3DwPd9Jr5vPqWvj8zh83vEwL2J75vnfN/HMAy01oPNNQZBQBAEO1OvVsl0D/8lTuZfpYDd7gRBQKuD7XK5jGmarB679PIv8deVFJUKq8cuTZqmSblcRmu93QpYVkohhMCyrLE94n2/UlSrbJy5kRBCXBNCoJRCa73cClh0XbfgeR6WZZHNZunv719KvnmeYnWVVxdmJ2Ox2DMhxFHP83Bdt6C1XgR2LvHzQDvvb84npZQL8Xgc0zSJRqN7br7RaFCpVCiVStRqtZmhh9fTh754TQdMr82nPc+bsW27UCwWUUpRr9ep1+sopSgWi9i2XfA8b2Z6bT6ttabp4GMi0uz0aXbhn890+MFM85mO5MIdwP/Eb1pMUCdctYRzAAAAAElFTkSuQmCC') no-repeat;
-}
-
-.disable-icon-selected {
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACFUlEQVR4XqWTP0tbURjGn9zY3mjBwsUhBQtS6XKxiNypIGZJ6SKYUYdaKWg7OrrE3pYO+Qit3dpFuuQO6lI7Z4nESQdjlJbkJh0MksSb3Jvk9H0gjZFu9YWH83LO7zn/3nNCSincJobAeP1sEDBFi6J50UyPy4l2RNuioz756Ts0tt1OB4jH2a52Ne2HGh9PwrJm2EcxZx/HyPRYMDgB2u02/N3d1c7w8BZMM1ptNJBPp3GwsUExB/s4RoYsPf0JOkFgdoH34YkJ/D48xC/HyTTOzl5ayWSIktwxqlVo0SjIkKWnP0Hg+4swjGitVMJFNpu5o+svptfXv6DZBDIZezoWS3Db3A0ZsvRcH8H354dGR9EoFHA3EvlorqycwvOAXM4G8Pav+f7YmEOGLD1gsIzl54+V+vBK/Yw9ZAv1LQW1FrdFSnKVfQTK5liPUfRI9I8ArqiPjLAF9vcHVybyzlpasgcZeq7voNXKNSsV3DMMXB4fp/8xLyzYuLri2DIZsvQM3sFOzXURiUR4zsQNcyrFleFVKpNyP2/IkKVnsArbF65bbkqplJSJZrl5x5qbs7G3h3artSyV+arr+lMyZOnpP2Wp6ZFos3R+vvUgCGDNzgKalkA4rECIr07662J2i0X4nrfJJ33jJT6Zmvpcr9XWCicn5WI+j7rrAmKgmLOPY2TI0sPgb8TBZOi/PpN1qnDr7/wH3jxgB/FKIXkAAAAASUVORK5CYII=') no-repeat;
-}
-
-.breakpoint {
-    float: right;
-    width: 14px;
-    height: 14px;
-    background-color: #eee;
-    border: 1px solid #aaa;
-}
-
-.breakpoint-selected {
-    background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEXIUkvzUVHzTEzzn5785eXrbW24BgbzWVnze3vzVVXzY2Pyion509PzbW3zXV1UMxj0l5f1srKbRTRgOxzJDg796ur74ODfIyP5zs6LLx3pNTXYGxuxdkVZNhn////sCC1eAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABWSURBVBjTnc+7EoAgDERRTOQVxMEZFAf//z8FjAUFDbfb060QU2FwxngimxnCea3bjegSgz+0tguAfBgIy64QGfZQdg91dgAtqUZgnfz6IacYVWvu2AvR4wNAv0nxrAAAAABJRU5ErkJggg==') no-repeat -2px -2px;
-}
-
-.banner-right {
-    float: right;
-    margin-right: 10px;
-}
-
-#banner img {
-    margin-bottom: 2px;
-    margin-left: 8px;
-}
-
-.category-title {
-    display: block;
-    padding: 10px;
-}
-
-.category {
-    margin: 0 !important;
-    border-radius: 0 !important;
-    border: none;
-}
-
-#search {
-    border-radius: 0;
-    border: none;
 }
 
 .loading_file {
     background: #f5f5f5 url('data:image/gif;base64,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 truncated
 }
-
-#alert {
-    position: fixed;
-    width: 30%;
-    margin: 30px auto;
-    top: 10px;
-    left: 0;
-    right: 0;
-    z-index: 2000;
-    display: none;
-}
-
-#alert a {
-    text-decoration: underline;
-}
-
-.option-item .bootstrap-switch {
-    margin: 15px 10px;
-}
-
-.option-item button {
-    margin: 10px;
-}
-
-.option-item input[type=number] {
-    margin: 15px 10px;
-    width: 80px;
-    height: 28px;
-    padding: 3px 10px;
-    vertical-align: middle;
-}
-
-.option-item select {
-    margin: 10px;
-    display: inline-block;
-}
-
-button img,
-span.btn img {
-    margin-right: 3px;
-    margin-bottom: 1px;
-}
-
-#edit-favourites {
-    float: right;
-    margin-top: -5px;
-}
-
-#edit-favourites-list {
-    margin: 10px;
-}
-
-.about-img-left {
-    float: left;
-    margin: 10px 20px 20px 0;
-}
-
-.about-img-right {
-    float: right;
-    margin: 10px 0 20px 20px;
-}
-
-.save-link-options {
-    float: right;
-}
-
-.save-link-options input{
-    margin-left: 10px;
-}
-
-#save-footer {
-    border-top: none;
-    margin-top: 0;
-}

src/web/stylesheets/layout/_modals.scss

@@ -0,0 +1,80 @@
+/**
+ * Modal layout styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.option-item .bootstrap-switch {
+    margin: 15px 10px;
+}
+
+.option-item button {
+    margin: 10px;
+}
+
+.option-item input[type=number] {
+    margin: 15px 10px;
+    width: 80px;
+    height: 28px;
+    padding: 3px 10px;
+    vertical-align: middle;
+    font-size: $argInputFontSize - 1px;
+    line-height: $argInputLineHeight;
+    color: $argFontColour;
+    background-color: $argBackground;
+    border: 1px solid $primaryBorderColour;
+}
+
+.option-item select {
+    margin: 10px;
+    display: inline-block;
+}
+
+#edit-favourites-list {
+    margin: 10px;
+    border: 1px solid $opListOperationBorderColour;
+}
+
+#edit-favourites-list .operation {
+    border-left: none;
+    border-right: none;
+}
+
+#edit-favourites-list .operation:last-child {
+    border-bottom: none;
+}
+
+.about-img-left {
+    float: left;
+    margin: 10px 20px 20px 0;
+}
+
+.about-img-right {
+    float: right;
+    margin: 10px 0 20px 20px;
+}
+
+.save-link-options {
+    float: right;
+}
+
+.save-link-options input{
+    margin-left: 10px;
+}
+
+#save-footer {
+    border-top: none;
+    margin-top: 0;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+#support-modal textarea {
+    font-family: $primaryFontFamily;
+}
+
+#save-text,
+#load-text {
+    font-family: $fixedWidthFontFamily;
+}

src/web/stylesheets/layout/_operations.scss

@@ -0,0 +1,65 @@
+/**
+ * Operation area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#op-list {
+    @extend .list-area;
+}
+
+.category-title {
+    display: block;
+    padding: 10px;
+    background-color: $secondaryBackgroundColour;
+    border-bottom: 1px solid $secondaryBorderColour;
+    font-weight: $titleWeight;
+}
+
+.category-title[href='#catFavourites'] {
+    border-bottom-color: $primaryBorderColour;
+}
+
+.category-title[aria-expanded=true] {
+    border-bottom-color: $primaryBorderColour;
+}
+
+.category-title.collapsed {
+    border-bottom-color: $secondaryBorderColour;
+}
+
+.category-title:hover {
+    color: $opListOperationFontColour;
+}
+
+.category {
+    margin: 0 !important;
+    border-radius: 0 !important;
+    border: none;
+}
+
+.op-list .operation {
+    color: $opListOperationFontColour;
+    background-color: $opListOperationBgColour;
+    border-color: $opListOperationBorderColour;
+}
+
+#search {
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid $primaryBorderColour;
+}
+
+#edit-favourites {
+    float: right;
+    margin-top: -5px;
+}
+
+.favourites-hover {
+    color: $recListOperationFontColour;
+    background-color: $recListOperationBgColour;
+    border: 2px dashed $recListOperationFontColour !important;
+    padding: 8px 8px 9px 8px;
+}

src/web/stylesheets/layout/_recipe.scss

@@ -0,0 +1,19 @@
+/**
+ * Recipe area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#rec-list {
+    @extend .list-area;
+    bottom: $controlsHeight;
+    overflow: auto;
+}
+
+#rec-list .operation {
+    color: $recListOperationFontColour;
+    background-color: $recListOperationBgColour;
+    border-color: $recListOperationBorderColour;
+}

src/web/stylesheets/layout/_structure.scss

@@ -1,16 +1,51 @@
-#banner {
+/**
-    border-bottom: 1px solid #ddd;
+ * Overall page structure styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#content-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 
-.title {
+#workspace-wrapper {
-    border-bottom: 1px solid #ddd;
+    position: absolute;
-    font-weight: bold;
+    top: 30px;
-    color: #424242;
+    bottom: 0;
-    background-color: #fafafa;
+    width: 100%;
+}
+
+div#operations,
+div#recipe {
+    width: 50%;
+    height: 100%;
+}
+
+div#input,
+div#output {
+    width: 100%;
+    height: 50%;
+}
+
+.split {
+    @include box-sizing(border-box);
+    overflow: auto;
+    position: relative;
+}
+
+.split.split-horizontal, .gutter.gutter-horizontal {
+    height: 100%;
+    float: left;
 }
 
 .gutter {
-    background-color: #eee;
+    background-color: $secondaryBorderColour;
     background-repeat: no-repeat;
     background-position: 50%;
 }
@@ -23,236 +58,4 @@
 .gutter.gutter-vertical {
     background-image: url('data:image/png;base64,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');
     cursor: ns-resize;
-}
+}
-
-.operation {
-    border: 1px solid #999;
-    border-top-width: 0;
-}
-
-.op-list .operation { /*blue*/
-    color: #3a87ad;
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-}
-
-#rec-list .operation { /*green*/
-    color: #468847;
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-}
-
-#controls {
-    border-top: 1px solid #ddd;
-    background-color: #fafafa;
-}
-
-.textarea-wrapper textarea,
-.textarea-wrapper div {
-    font-family: Consolas, monospace;
-    font-size: inherit;
-}
-
-.io-info {
-    font-family: Consolas, monospace;
-    font-weight: normal;
-    font-size: 8pt;
-}
-
-.arg-title {
-    font-weight: bold;
-}
-
-.arg-input {
-    height: 34px;
-    font-size: 15px;
-    line-height: 1.428571429;
-    color: #424242;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    font-family: Consolas, monospace;
-}
-
-select {
-    padding: 6px 8px;
-    height: 34px;
-    border: 1px solid #ddd;
-    background-color: #fff;
-    color: #424242;
-}
-
-.arg[disabled] {
-    background-color: #eee;
-}
-
-textarea.arg {
-    color: #424242;
-    font-family: Consolas, monospace;
-}
-
-.break {
-    color: #b94a48 !important;
-    background-color: #f2dede !important;
-    border-color: #eed3d7 !important;
-}
-
-.category-title {
-    background-color: #fafafa;
-    border-bottom: 1px solid #eee;
-    font-weight: bold;
-}
-
-.category-title[href='#catFavourites'] {
-    border-bottom-color: #ddd;
-}
-
-.category-title[aria-expanded=true] {
-    border-bottom-color: #ddd;
-}
-
-.category-title.collapsed {
-    border-bottom-color: #eee;
-}
-
-.category-title:hover {
-    color: #3a87ad;
-}
-
-#search {
-    border-bottom: 1px solid #e3e3e3;
-}
-
-.dropping-file {
-    border: 5px dashed #3a87ad !important;
-}
-
-.selected-op {
-    color: #c09853 !important;
-    background-color: #fcf8e3 !important;
-    border-color: #fbeed5 !important;
-}
-
-.option-item input[type=number] {
-    font-size: 14px;
-    line-height: 1.428571429;
-    color: #555;
-    background-color: #fff;
-    border: 1px solid #ccc;
-}
-
-.favourites-hover {
-    color: #468847;
-    background-color: #dff0d8;
-    border: 2px dashed #468847 !important;
-    padding: 8px 8px 9px 8px;
-}
-
-#edit-favourites-list {
-    border: 1px solid #bce8f1;
-}
-
-#edit-favourites-list .operation {
-    border-left: none;
-    border-right: none;
-}
-
-#edit-favourites-list .operation:last-child {
-    border-bottom: none;
-}
-
-.subtext {
-    font-style: italic;
-    font-size: 13px;
-    color: #999;
-}
-
-#save-footer {
-    border-bottom: 1px solid #e5e5e5;
-}
-
-.flow-control-op {
-    color: #396f3a !important;
-    background-color: #c7e4ba !important;
-    border-color: #b3dba2 !important;
-}
-
-.flow-control-op.break {
-    color: #94312f !important;
-    background-color: #eabfbf !important;
-    border-color: #e2aeb5 !important;
-}
-
-#support-modal textarea {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#save-text,
-#load-text {
-    font-family: Consolas, monospace;
-}
-
-button.dropdown-toggle {
-    background-color: #f4f4f4;
-}
-
-
-
-
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-::-webkit-scrollbar-track {
-    background-color: #fafafa;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: #bbb;
-}
-::-webkit-scrollbar-corner {
-    background-color: #fafafa;
-}
-
-.disabled {
-    color: #999 !important;
-    background-color: #dfdfdf !important;
-    border-color: #cdcdcd !important;
-}
-
-.grey {
-    color: #333;
-    background-color: #f5f5f5;
-    border-color: #ddd;
-}
-
-.dark-blue {
-    color: #fff;
-    background-color: #428bca;
-    border-color: #428bca;
-}
-
-.red {
-    color: #b94a48;
-    background-color: #f2dede;
-    border-color: #eed3d7;
-}
-
-.amber {
-    color: #c09853;
-    background-color: #fcf8e3;
-    border-color: #fbeed5;
-}
-
-.green {
-    color: #468847;
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-}
-
-.blue {
-    color: #3a87ad;
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-}

src/web/stylesheets/main.scss

@@ -10,12 +10,32 @@
 @import "~google-code-prettify/src/prettify.css";
 
 // Frameworks
-@import "vendors/bootstrap.scss";
+@import "vendors/bootstrap";
 @import "~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
 @import "~bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
 
+
 // CyberChef styles
-@import "structure/overrides.scss";
+// Theme
-@import "structure/layout.scss";
+@import "themes/_classic";
-@import "structure/utils.scss";
+
-@import "themes/classic.scss";
+// Utilities
+@import "utils/_mixins";
+@import "utils/_overrides";
+@import "utils/_general";
+
+// Components
+@import "components/_alert";
+@import "components/_button";
+@import "components/_list";
+@import "components/_operation";
+@import "components/_pane";
+
+// Layout
+@import "layout/_banner";
+@import "layout/_controls";
+@import "layout/_io";
+@import "layout/_modals";
+@import "layout/_operations";
+@import "layout/_recipe";
+@import "layout/_structure";

src/web/stylesheets/structure/utils.scss

@@ -1,37 +0,0 @@
-.word-wrap {
-    white-space: pre !important;
-    word-wrap: normal !important;
-    overflow-x: scroll !important;
-}
-
-.clearfix {
-    clear: both;
-    height: 0;
-}
-
-.blur {
-    color: transparent !important;
-    text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;
-}
-
-.no-select { 
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.konami {
-    -ms-transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
-    transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-}
-
-.hl1, .hlyellow { background-color: #fff000; }
-.hl2, .hlblue   { background-color: #95dfff; }
-.hl3, .hlred    { background-color: #ffb6b6; } /* Half-Life 3 confirmed :O */
-.hl4, .hlorange { background-color: #fcf8e3; }
-.hl5, .hlgreen  { background-color: #8de768; }

src/web/stylesheets/themes/_classic.scss

@@ -0,0 +1,90 @@
+/**
+ * Classic theme definitions
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+$primaryFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$primaryFontColour: #333;
+$primaryFontSize: 14px;
+$primaryLineHeight: 20px;
+
+$fixedWidthFontFamily: "Consolas", monospace;
+$fixedWidthFontColour: inherit;
+$fixedWidthFontSize: inherit;
+
+$subtextFontColour: #999;
+$subtextFontSize: 13px;
+
+$primaryBackgroundColour: #fff;
+$secondaryBackgroundColour: #fafafa;
+
+$primaryBorderColour: #ddd;
+$secondaryBorderColour: #eee;
+
+$titleColour: #424242;
+$titleWeight: bold;
+
+
+// Operation colours
+$opListOperationFontColour: #3a87ad;
+$opListOperationBgColour: #d9edf7;
+$opListOperationBorderColour: #bce8f1;
+
+$recListOperationFontColour: #468847;
+$recListOperationBgColour: #dff0d8;
+$recListOperationBorderColour: #d6e9c6;
+
+$selectedOperationFontColor: #c09853;
+$selectedOperationBgColour: #fcf8e3;
+$selectedOperationBorderColour: #fbeed5;
+
+$breakpointFontColour: #b94a48;
+$breakpointBgColour: #f2dede;
+$breakpointBorderColour: #eed3d7;
+
+$breakpointFontColour: #b94a48;
+$breakpointBgColour: #f2dede;
+$breakpointBorderColour: #eed3d7;
+
+$disabledFontColour: #999;
+$disabledBgColour: #dfdfdf;
+$disabledBorderColour: #cdcdcd;
+
+$fcOperationFontColour: #396f3a;
+$fcOperationBgColour: #c7e4ba;
+$fcOperationBorderColour: #b3dba2;
+
+$fcBreakpointOperationFontColour: #94312f;
+$fcBreakpointOperationBgColour: #eabfbf;
+$fcBreakpointOperationBorderColour: #e2aeb5;
+
+
+// Operation arguments
+$argTitleFontWeight: bold;
+$argInputHeight: 34px;
+$argInputLineHeight: 20px;
+$argInputFontSize: 15px;
+$argFontColour: #424242;
+$argBackground: #fff;
+$argDisabledBackground: #eee;
+
+
+// Misc.
+$dropFileBorderColour: #3a87ad;
+
+$bannerFontColour: #468847;
+$bannerBgColour: #dff0d8;
+
+$scrollbarTrack: $secondaryBackgroundColour;
+$scrollbarThumb: #ccc;
+$scrollbarHover: #bbb;
+
+// Highlighter colours
+$hl1: #fff000;
+$hl2: #95dfff;
+$hl3: #ffb6b6;
+$hl4: #fcf8e3;
+$hl5: #8de768;

src/web/stylesheets/utils/_general.scss

@@ -0,0 +1,73 @@
+/**
+ * General styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+body {
+    font-family: $primaryFontFamily;
+    font-size: $primaryFontSize;
+    line-height: $primaryLineHeight;
+    color: $primaryFontColour;
+    background-color: $primaryBackgroundColour;
+}
+
+.subtext {
+    font-style: italic;
+    font-size: $subtextFontSize;
+    color: $subtextFontColour;
+}
+
+.word-wrap {
+    white-space: pre !important;
+    word-wrap: normal !important;
+    overflow-x: scroll !important;
+}
+
+.clearfix {
+    clear: both;
+    height: 0;
+}
+
+.blur {
+    color: transparent !important;
+    text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;
+}
+
+.no-select { 
+    @include user-select(none);
+}
+
+.konami {
+    @include transform(180deg);
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: $secondaryBackgroundColour;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: $scrollbarThumb;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: $scrollbarHover;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: $secondaryBackgroundColour;
+}
+
+// Highlighters
+.hl1, { background-color: $hl1; }
+.hl2, { background-color: $hl2; }
+.hl3, { background-color: $hl3; } /* Half-Life 3 confirmed :O */
+.hl4, { background-color: $hl4; }
+.hl5, { background-color: $hl5; }

src/web/stylesheets/utils/_mixins.scss

@@ -0,0 +1,29 @@
+/**
+ * Mixins to cover vendor prefixes
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+@mixin box-sizing($value) {
+    -webkit-box-sizing: $value;
+       -moz-box-sizing: $value;
+            box-sizing: $value;
+}
+
+@mixin user-select($value) {
+    -webkit-touch-callout: $value;
+    -webkit-user-select: $value;
+    -khtml-user-select: $value;
+    -moz-user-select: $value;
+    -ms-user-select: $value;
+    user-select: $value;
+}
+
+@mixin transform($value) {
+    -ms-transform: rotate($value);
+    -webkit-transform: rotate($value);
+    -moz-transform: rotate($value);
+    transform: rotate($value);
+}

src/web/stylesheets/utils/_overrides.scss

@@ -1,3 +1,11 @@
+/**
+ * Overrides for vendor styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
 /* Bootstrap */
 
 button,