diff --git a/src/web/index.js b/src/web/index.js
index e0b86683..df454152 100755
--- a/src/web/index.js
+++ b/src/web/index.js
@@ -5,7 +5,7 @@
*/
// Styles
-import "./stylesheets/main.scss";
+import "./stylesheets/main.js";
// Libs
import "babel-polyfill";
diff --git a/src/web/stylesheets/components/_alert.scss b/src/web/stylesheets/components/_alert.css
similarity index 100%
rename from src/web/stylesheets/components/_alert.scss
rename to src/web/stylesheets/components/_alert.css
diff --git a/src/web/stylesheets/components/_button.scss b/src/web/stylesheets/components/_button.css
similarity index 100%
rename from src/web/stylesheets/components/_button.scss
rename to src/web/stylesheets/components/_button.css
diff --git a/src/web/stylesheets/components/_list.scss b/src/web/stylesheets/components/_list.css
similarity index 57%
rename from src/web/stylesheets/components/_list.scss
rename to src/web/stylesheets/components/_list.css
index fbb47dd0..31e40837 100644
--- a/src/web/stylesheets/components/_list.scss
+++ b/src/web/stylesheets/components/_list.css
@@ -15,25 +15,25 @@
.category-title {
display: block;
padding: 10px;
- background-color: $secondaryBackgroundColour;
- border-bottom: 1px solid $secondaryBorderColour;
- font-weight: $titleWeight;
+ background-color: var(--secondary-background-colour);
+ border-bottom: 1px solid var(--secondary-border-colour);
+ font-weight: var(--title-weight);
}
.category-title[href='#catFavourites'] {
- border-bottom-color: $primaryBorderColour;
+ border-bottom-color: var(--primary-border-colour);
}
.category-title[aria-expanded=true] {
- border-bottom-color: $primaryBorderColour;
+ border-bottom-color: var(--primary-border-colour);
}
.category-title.collapsed {
- border-bottom-color: $secondaryBorderColour;
+ border-bottom-color: var(--secondary-border-colour);
}
.category-title:hover {
- color: $opListOperationFontColour;
+ color: var(--op-list-operation-font-colour);
}
.category {
diff --git a/src/web/stylesheets/components/_operation.scss b/src/web/stylesheets/components/_operation.css
similarity index 72%
rename from src/web/stylesheets/components/_operation.scss
rename to src/web/stylesheets/components/_operation.css
index 6c64e24a..13fb17a1 100644
--- a/src/web/stylesheets/components/_operation.scss
+++ b/src/web/stylesheets/components/_operation.css
@@ -44,7 +44,7 @@
}
.arg-title {
- font-weight: $argTitleFontWeight;
+ font-weight: var(--arg-title-font-weight);
}
.arg-input {
@@ -52,13 +52,13 @@
width: 100%;
padding: 6px 12px;
vertical-align: middle;
- height: $argInputHeight;
- font-size: $argInputFontSize;
- line-height: $argInputLineHeight;
- color: $argFontColour;
- background-color: $argBackground;
- border: 1px solid $argBorderColour;
- font-family: $fixedWidthFontFamily;
+ height: var(--arg-input-height);
+ font-size: var(--arg-input-font-size);
+ line-height: var(--arg-input-line-height);
+ color: var(--arg-font-colour);
+ background-color: var(--arg-background);
+ border: 1px solid var(--arg-border-colour);
+ font-family: var(--fixed-width-font-family);
}
.short-string {
@@ -69,15 +69,15 @@ select {
display: block;
padding: 6px 8px;
height: 34px;
- border: 1px solid $argBorderColour;
- background-color: $argBackground;
- color: $argFontColour;
+ border: 1px solid var(--arg-border-colour);
+ background-color: var(--arg-background);
+ color: var(--arg-font-colour);
}
.arg[disabled] {
cursor: not-allowed;
opacity: 1;
- background-color: $argDisabledBackground;
+ background-color: var(--arg-disabled-background);
}
textarea.arg {
@@ -85,11 +85,11 @@ textarea.arg {
min-height: 50px;
height: 70px;
margin-top: 5px;
- border: 1px solid $argBorderColour;
+ border: 1px solid var(--arg-border-colour);
resize: vertical;
- color: $argFontColour;
- background-color: $argBackground;
- font-family: $fixedWidthFontFamily;
+ color: var(--arg-font-colour);
+ background-color: var(--arg-background);
+ font-family: var(--fixed-width-font-family);
}
.arg-label {
@@ -120,7 +120,7 @@ textarea.arg {
}
button.dropdown-toggle {
- background-color: $secondaryBackgroundColour;
+ background-color: var(--secondary-background-colour);
}
.op-icon {
@@ -166,31 +166,31 @@ button.dropdown-toggle {
}
.break {
- color: $breakpointFontColour !important;
- background-color: $breakpointBgColour !important;
- border-color: $breakpointBorderColour !important;
+ color: var(--breakpoint-font-colour) !important;
+ background-color: var(--breakpoint-bg-colour) !important;
+ border-color: var(--breakpoint-border-colour) !important;
}
.selected-op {
- color: $selectedOperationFontColor !important;
- background-color: $selectedOperationBgColour !important;
- border-color: $selectedOperationBorderColour !important;
+ color: var(--selected-operation-font-color) !important;
+ background-color: var(--selected-operation-bg-colour) !important;
+ border-color: var(--selected-operation-border-colour) !important;
}
.flow-control-op {
- color: $fcOperationFontColour !important;
- background-color: $fcOperationBgColour !important;
- border-color: $fcOperationBorderColour !important;
+ color: var(--fc-operation-font-colour) !important;
+ background-color: var(--fc-operation-bg-colour) !important;
+ border-color: var(--fc-operation-border-colour) !important;
}
.flow-control-op.break {
- color: $fcBreakpointOperationFontColour !important;
- background-color: $fcBreakpointOperationBgColour !important;
- border-color: $fcBreakpointOperationBorderColour !important;
+ color: var(--fc-breakpoint-operation-font-colour) !important;
+ background-color: var(--fc-breakpoint-operation-bg-colour) !important;
+ border-color: var(--fc-breakpoint-operation-border-colour) !important;
}
.disabled {
- color: $disabledFontColour !important;
- background-color: $disabledBgColour !important;
- border-color: $disabledBorderColour !important;
+ color: var(--disabled-font-colour) !important;
+ background-color: var(--disabled-bg-colour) !important;
+ border-color: var(--disabled-border-colour) !important;
}
diff --git a/src/web/stylesheets/components/_pane.scss b/src/web/stylesheets/components/_pane.css
similarity index 50%
rename from src/web/stylesheets/components/_pane.scss
rename to src/web/stylesheets/components/_pane.css
index 4b1ad56b..e61f101e 100644
--- a/src/web/stylesheets/components/_pane.scss
+++ b/src/web/stylesheets/components/_pane.css
@@ -6,20 +6,22 @@
* @license Apache-2.0
*/
-$titleHeight: 43px;
+:root {
+ --title-height: 43px;
+}
.title {
padding: 10px;
- height: $titleHeight;
- border-bottom: 1px solid $primaryBorderColour;
- font-weight: $titleWeight;
- color: $titleColour;
- background-color: $secondaryBackgroundColour;
+ height: var(--title-height);
+ border-bottom: 1px solid var(--primary-border-colour);
+ font-weight: var(--title-weight);
+ color: var(--title-colour);
+ background-color: var(--secondary-background-colour);
}
.list-area {
position: absolute;
- top: $titleHeight;
+ top: var(--title-height);
bottom: 0;
width: 100%;
list-style-type: none;
diff --git a/src/web/stylesheets/layout/_banner.scss b/src/web/stylesheets/layout/_banner.css
similarity index 72%
rename from src/web/stylesheets/layout/_banner.scss
rename to src/web/stylesheets/layout/_banner.css
index bb1e6134..df994ea5 100644
--- a/src/web/stylesheets/layout/_banner.scss
+++ b/src/web/stylesheets/layout/_banner.css
@@ -12,9 +12,9 @@
width: 100%;
text-align: center;
line-height: 30px;
- border-bottom: 1px solid $primaryBorderColour;
- color: $bannerFontColour;
- background-color: $bannerBgColour;
+ border-bottom: 1px solid var(--primary-border-colour);
+ color: var(--banner-font-colour);
+ background-color: var(--banner-bg-colour);
}
.banner-right {
diff --git a/src/web/stylesheets/layout/_controls.scss b/src/web/stylesheets/layout/_controls.css
similarity index 65%
rename from src/web/stylesheets/layout/_controls.scss
rename to src/web/stylesheets/layout/_controls.css
index 5b82296a..53549060 100644
--- a/src/web/stylesheets/layout/_controls.scss
+++ b/src/web/stylesheets/layout/_controls.css
@@ -6,21 +6,23 @@
* @license Apache-2.0
*/
-$controlsHeight: 120px;
-$controlsDivision: 65%;
+:root {
+ --controls-height: 120px;
+ --controls-division: 65%;
+}
#controls {
position: absolute;
width: 100%;
- height: $controlsHeight;
+ height: var(--controls-height);
bottom: 0;
padding: 10px;
- border-top: 1px solid $primaryBorderColour;
- background-color: $secondaryBackgroundColour;
+ border-top: 1px solid var(--primary-border-colour);
+ background-color: var(--secondary-background-colour);
}
#operational-controls {
- width: $controlsDivision;
+ width: var(--controls-division);
float: left;
text-align: center;
}
@@ -44,11 +46,11 @@ $controlsDivision: 65%;
width: 60px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
- border-left: 1px solid $btnSuccessBgColour;
+ border-left: 1px solid var(--btn-success-bg-colour);
}
#auto-bake-label:hover {
- border-left-color: $btnSuccessHoverBorderColour;
+ border-left-color: var(--btn-success-hover-border-colour);
}
#auto-bake-label div {
@@ -58,6 +60,6 @@ $controlsDivision: 65%;
#extra-controls {
float: right;
- width: 100% - $controlsDivision;
+ width: calc(100% - var(--controls-division));
padding-left: 10px;
}
diff --git a/src/web/stylesheets/layout/_io.scss b/src/web/stylesheets/layout/_io.css
similarity index 97%
rename from src/web/stylesheets/layout/_io.scss
rename to src/web/stylesheets/layout/_io.css
index e4070705..ce2d05e7 100644
--- a/src/web/stylesheets/layout/_io.scss
+++ b/src/web/stylesheets/layout/_io.css
@@ -6,7 +6,9 @@
* @license Apache-2.0
*/
-.io-textarea {
+#input-text,
+#output-text,
+#output-html {
position: relative;
width: 100%;
height: 100%;
@@ -22,13 +24,7 @@
word-wrap: break-word;
}
-#input-text,
-#output-text {
- @extend .io-textarea;
-}
-
#output-html {
- @extend .io-textarea;
display: none;
overflow-y: auto;
-moz-padding-start: 1px; /* Fixes bug in Firefox */
@@ -44,9 +40,9 @@
.textarea-wrapper textarea,
.textarea-wrapper div {
- font-family: $fixedWidthFontFamily;
- font-size: $fixedWidthFontSize;
- color: $fixedWidthFontColour;
+ font-family: var(--fixed-width-font-family);
+ font-size: var(--fixed-width-font-size);
+ color: var(--fixed-width-font-colour);
}
#input-highlighter,
@@ -79,7 +75,7 @@
height: 30px;
text-align: right;
line-height: 10px;
- font-family: $fixedWidthFontFamily;
+ font-family: var(--fixed-width-font-family);
font-weight: normal;
font-size: 8pt;
}
@@ -89,7 +85,7 @@
}
.dropping-file {
- border: 5px dashed $dropFileBorderColour !important;
+ border: 5px dashed var(--drop-file-border-colour) !important;
}
.loading_file {
diff --git a/src/web/stylesheets/layout/_modals.scss b/src/web/stylesheets/layout/_modals.css
similarity index 69%
rename from src/web/stylesheets/layout/_modals.scss
rename to src/web/stylesheets/layout/_modals.css
index 3aae2acc..1eff46a5 100644
--- a/src/web/stylesheets/layout/_modals.scss
+++ b/src/web/stylesheets/layout/_modals.css
@@ -20,11 +20,11 @@
height: 28px;
padding: 3px 10px;
vertical-align: middle;
- font-size: $argInputFontSize - 1px;
- line-height: $argInputLineHeight;
- color: $argFontColour;
- background-color: $argBackground;
- border: 1px solid $primaryBorderColour;
+ font-size: calc(var(--arg-input-font-size) - 1px);
+ line-height: var(--arg-input-line-height);
+ color: var(--arg-font-colour);
+ background-color: var(--arg-background);
+ border: 1px solid var(--primary-border-colour);
}
.option-item select {
@@ -34,7 +34,7 @@
#edit-favourites-list {
margin: 10px;
- border: 1px solid $opListOperationBorderColour;
+ border: 1px solid var(--op-list-operation-border-colour);
}
#edit-favourites-list .operation {
@@ -67,14 +67,14 @@
#save-footer {
border-top: none;
margin-top: 0;
- border-bottom: 1px solid $primaryBorderColour;
+ border-bottom: 1px solid var(--primary-border-colour);
}
#support-modal textarea {
- font-family: $primaryFontFamily;
+ font-family: var(--primary-font-family);
}
#save-text,
#load-text {
- font-family: $fixedWidthFontFamily;
+ font-family: var(--fixed-width-font-family);
}
diff --git a/src/web/stylesheets/layout/_operations.css b/src/web/stylesheets/layout/_operations.css
new file mode 100644
index 00000000..45de95db
--- /dev/null
+++ b/src/web/stylesheets/layout/_operations.css
@@ -0,0 +1,31 @@
+/**
+ * Operation area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.op-list .operation {
+ color: var(--op-list-operation-font-colour);
+ background-color: var(--op-list-operation-bg-colour);
+ border-color: var(--op-list-operation-border-colour);
+}
+
+#search {
+ border-radius: 0;
+ border: none;
+ border-bottom: 1px solid var(--primary-border-colour);
+}
+
+#edit-favourites {
+ float: right;
+ margin-top: -5px;
+}
+
+.favourites-hover {
+ color: var(--rec-list-operation-font-colour);
+ background-color: var(--rec-list-operation-bg-colour);
+ border: 2px dashed var(--rec-list-operation-font-colour) !important;
+ padding: 8px 8px 9px 8px;
+}
diff --git a/src/web/stylesheets/layout/_operations.scss b/src/web/stylesheets/layout/_operations.scss
deleted file mode 100644
index 087ec5f3..00000000
--- a/src/web/stylesheets/layout/_operations.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Operation area styles
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-#op-list {
- @extend .list-area;
-}
-
-.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;
-}
diff --git a/src/web/stylesheets/layout/_recipe.css b/src/web/stylesheets/layout/_recipe.css
new file mode 100644
index 00000000..bd70d10f
--- /dev/null
+++ b/src/web/stylesheets/layout/_recipe.css
@@ -0,0 +1,18 @@
+/**
+ * Recipe area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#rec-list {
+ bottom: var(--controls-height);
+ overflow: auto;
+}
+
+#rec-list .operation {
+ color: var(--rec-list-operation-font-colour);
+ background-color: var(--rec-list-operation-bg-colour);
+ border-color: var(--rec-list-operation-border-colour);
+}
diff --git a/src/web/stylesheets/layout/_recipe.scss b/src/web/stylesheets/layout/_recipe.scss
deleted file mode 100644
index 8f19672a..00000000
--- a/src/web/stylesheets/layout/_recipe.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 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;
-}
diff --git a/src/web/stylesheets/layout/_structure.scss b/src/web/stylesheets/layout/_structure.css
similarity index 98%
rename from src/web/stylesheets/layout/_structure.scss
rename to src/web/stylesheets/layout/_structure.css
index fefd254a..d9275ba5 100644
--- a/src/web/stylesheets/layout/_structure.scss
+++ b/src/web/stylesheets/layout/_structure.css
@@ -34,7 +34,7 @@ div#output {
}
.split {
- @include box-sizing(border-box);
+ box-sizing: border-box;
overflow: auto;
position: relative;
}
@@ -45,7 +45,7 @@ div#output {
}
.gutter {
- background-color: $secondaryBorderColour;
+ background-color: var(--secondary-border-colour);
background-repeat: no-repeat;
background-position: 50%;
}
diff --git a/src/web/stylesheets/main.js b/src/web/stylesheets/main.js
new file mode 100644
index 00000000..58299f43
--- /dev/null
+++ b/src/web/stylesheets/main.js
@@ -0,0 +1,44 @@
+/**
+ * Styles index
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+/* Libraries */
+import "google-code-prettify/src/prettify.css";
+
+/* Frameworks */
+import "./vendors/bootstrap.scss";
+import "bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
+import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
+
+
+/* CyberChef styles */
+/* Themes */
+import "./themes/_classic.css";
+import "./themes/_dark.css";
+
+/* Utilities */
+import "./utils/_overrides.css";
+import "./utils/_general.css";
+
+/* Preloader styles */
+import "./preloader.css";
+
+/* Components */
+import "./components/_alert.css";
+import "./components/_button.css";
+import "./components/_list.css";
+import "./components/_operation.css";
+import "./components/_pane.css";
+
+/* Layout */
+import "./layout/_banner.css";
+import "./layout/_controls.css";
+import "./layout/_io.css";
+import "./layout/_modals.css";
+import "./layout/_operations.css";
+import "./layout/_recipe.css";
+import "./layout/_structure.css";
diff --git a/src/web/stylesheets/main.scss b/src/web/stylesheets/main.scss
deleted file mode 100644
index 13b37090..00000000
--- a/src/web/stylesheets/main.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Styles index
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-// Libraries
-@import "~google-code-prettify/src/prettify.css";
-
-// Frameworks
-@import "vendors/bootstrap";
-@import "~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
-@import "~bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
-
-
-// CyberChef styles
-// Default theme
-@import "themes/_dark";
-
-// Utilities
-@import "utils/_mixins";
-@import "utils/_overrides";
-@import "utils/_general";
-
-// Preloader styles
-@import "preloader.scss";
-
-// 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";
diff --git a/src/web/stylesheets/preloader.scss b/src/web/stylesheets/preloader.css
similarity index 69%
rename from src/web/stylesheets/preloader.scss
rename to src/web/stylesheets/preloader.css
index e0b34af9..1dfce7ed 100644
--- a/src/web/stylesheets/preloader.scss
+++ b/src/web/stylesheets/preloader.css
@@ -13,7 +13,7 @@
width: 100%;
height: 100%;
z-index: 1000;
- background-color: $secondaryBorderColour;
+ background-color: var(--secondary-border-colour);
}
#preloader {
@@ -30,10 +30,11 @@
border-radius: 50%;
z-index: 1500;
- @include animation(spin 2s linear infinite);
+ animation: spin 2s linear infinite;
}
-.loader-arm {
+#preloader:before,
+#preloader:after {
content: "";
position: absolute;
top: 5px;
@@ -45,31 +46,29 @@
}
#preloader:before {
- @extend .loader-arm;
border-top-color: #e74c3c;
- @include animation(spin 3s linear infinite);
+ animation: spin 3s linear infinite;
}
#preloader:after {
- @extend .loader-arm;
border-top-color: #f9c922;
- @include animation(spin 1.5s linear infinite);
+ animation: spin 1.5s linear infinite;
}
/* Loaded */
.loaded #preloader {
opacity: 0;
- @include transition(all 0.3s ease-out);
+ transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
opacity: 0;
- @include transition(all 0.5s 0.3s ease-out);
+ transition: all 0.5s 0.3s ease-out;
}
.loaded #rec-list li {
- @include animation(bump 0.7s cubic-bezier(0.7, 0, 0.3, 1) both);
+ animation: bump 0.7s cubic-bezier(0.7, 0, 0.3, 1) both;
}
.loaded #content-wrapper {
@@ -117,37 +116,20 @@
}
-// Animations
-
-@-webkit-keyframes spin {
- 0% {
- @include rotate(0deg);
- }
- 100% {
- @include rotate(360deg);
- }
-}
+/* Animations */
@keyframes spin {
0% {
- @include rotate(0deg);
+ transform: rotate(0deg);
}
100% {
- @include rotate(360deg);
- }
-}
-
-
-@-webkit-keyframes bump {
- from {
- opacity: 0;
- @include translate3d(0, 200px, 0);
+ transform: rotate(360deg);
}
}
@keyframes bump {
from {
opacity: 0;
- @include translate3d(0, 200px, 0);
+ transform: translate3d(0, 200px, 0);
}
}
diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css
new file mode 100755
index 00000000..27b51f8e
--- /dev/null
+++ b/src/web/stylesheets/themes/_classic.css
@@ -0,0 +1,116 @@
+/**
+ * Classic theme definitions
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+:root.classic {
+ --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ --primary-font-colour: #333;
+ --primary-font-size: 14px;
+ --primary-line-height: 20px;
+
+ --fixed-width-font-family: "Consolas", monospace;
+ --fixed-width-font-colour: inherit;
+ --fixed-width-font-size: inherit;
+
+ --subtext-font-colour: #999;
+ --subtext-font-size: 13px;
+
+ --primary-background-colour: #fff;
+ --secondary-background-colour: #fafafa;
+
+ --primary-border-colour: #ddd;
+ --secondary-border-colour: #eee;
+
+ --title-colour: #424242;
+ --title-weight: bold;
+
+ --banner-font-colour: #468847;
+ --banner-bg-colour: #dff0d8;
+
+
+ /* Operation colours */
+ --op-list-operation-font-colour: #3a87ad;
+ --op-list-operation-bg-colour: #d9edf7;
+ --op-list-operation-border-colour: #bce8f1;
+
+ --rec-list-operation-font-colour: #468847;
+ --rec-list-operation-bg-colour: #dff0d8;
+ --rec-list-operation-border-colour: #d6e9c6;
+
+ --selected-operation-font-color: #c09853;
+ --selected-operation-bg-colour: #fcf8e3;
+ --selected-operation-border-colour: #fbeed5;
+
+ --breakpoint-font-colour: #b94a48;
+ --breakpoint-bg-colour: #f2dede;
+ --breakpoint-border-colour: #eed3d7;
+
+ --breakpoint-font-colour: #b94a48;
+ --breakpoint-bg-colour: #f2dede;
+ --breakpoint-border-colour: #eed3d7;
+
+ --disabled-font-colour: #999;
+ --disabled-bg-colour: #dfdfdf;
+ --disabled-border-colour: #cdcdcd;
+
+ --fc-operation-font-colour: #396f3a;
+ --fc-operation-bg-colour: #c7e4ba;
+ --fc-operation-border-colour: #b3dba2;
+
+ --fc-breakpoint-operation-font-colour: #94312f;
+ --fc-breakpoint-operation-bg-colour: #eabfbf;
+ --fc-breakpoint-operation-border-colour: #e2aeb5;
+
+
+ /* Operation arguments */
+ --arg-title-font-weight: bold;
+ --arg-input-height: 34px;
+ --arg-input-line-height: 20px;
+ --arg-input-font-size: 15px;
+ --arg-font-colour: #424242;
+ --arg-background: #fff;
+ --arg-border-colour: #ddd;
+ --arg-disabled-background: #eee;
+
+
+ /* Buttons */
+ --btn-default-font-colour: #333;
+ --btn-default-bg-colour: #fff;
+ --btn-default-border-colour: #ddd;
+
+ --btn-default-hover-font-colour: #333;
+ --btn-default-hover-bg-colour: #ebebeb;
+ --btn-default-hover-border-colour: #adadad;
+
+ --btn-success-font-colour: #fff;
+ --btn-success-bg-colour: #5cb85c;
+ --btn-success-border-colour: #4cae4c;
+
+ --btn-success-hover-font-colour: #fff;
+ --btn-success-hover-bg-colour: #449d44;
+ --btn-success-hover-border-colour: #398439;
+
+
+ /* Highlighter colours */
+ --hl1: #fff000;
+ --hl2: #95dfff;
+ --hl3: #ffb6b6;
+ --hl4: #fcf8e3;
+ --hl5: #8de768;
+
+
+ /* Scrollbar */
+ --scrollbar-track: var(--secondary-background-colour);
+ --scrollbar-thumb: #ccc;
+ --scrollbar-hover: #bbb;
+
+
+ /* Misc. */
+ --drop-file-border-colour: #3a87ad;
+ --popover-background: #fff;
+ --popover-border-colour: #ccc;
+}
diff --git a/src/web/stylesheets/themes/_classic.scss b/src/web/stylesheets/themes/_classic.scss
deleted file mode 100755
index 25ee5a8f..00000000
--- a/src/web/stylesheets/themes/_classic.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * 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;
-
-$bannerFontColour: #468847;
-$bannerBgColour: #dff0d8;
-
-
-// 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;
-$argBorderColour: #ddd;
-$argDisabledBackground: #eee;
-
-
-// Buttons
-$btnDefaultFontColour: #333;
-$btnDefaultBgColour: #fff;
-$btnDefaultBorderColour: #ddd;
-
-$btnDefaultHoverFontColour: #333;
-$btnDefaultHoverBgColour: #ebebeb;
-$btnDefaultHoverBorderColour: #adadad;
-
-$btnSuccessFontColour: #fff;
-$btnSuccessBgColour: #5cb85c;
-$btnSuccessBorderColour: #4cae4c;
-
-$btnSuccessHoverFontColour: #fff;
-$btnSuccessHoverBgColour: #449d44;
-$btnSuccessHoverBorderColour: #398439;
-
-
-// Highlighter colours
-$hl1: #fff000;
-$hl2: #95dfff;
-$hl3: #ffb6b6;
-$hl4: #fcf8e3;
-$hl5: #8de768;
-
-
-// Scrollbar
-$scrollbarTrack: $secondaryBackgroundColour;
-$scrollbarThumb: #ccc;
-$scrollbarHover: #bbb;
-
-
-// Misc.
-$dropFileBorderColour: #3a87ad;
-$popoverBackground: #fff;
-$popoverBorderColour: #ccc;
diff --git a/src/web/stylesheets/themes/_dark.css b/src/web/stylesheets/themes/_dark.css
new file mode 100644
index 00000000..fb1e7fcb
--- /dev/null
+++ b/src/web/stylesheets/themes/_dark.css
@@ -0,0 +1,126 @@
+/**
+ * Dark theme definitions
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+/*
+tabs
+links
+disabled buttons
+popovers
+toggle-string dropdowns
+alerts
+loading-file background
+*/
+
+:root.dark {
+ --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ --primary-font-colour: #c5c5c5;
+ --primary-font-size: 14px;
+ --primary-line-height: 20px;
+
+ --fixed-width-font-family: "Monaco", "Droid Sans Mono", "Consolas", monospace;
+ --fixed-width-font-colour: inherit;
+ --fixed-width-font-size: inherit;
+
+ --subtext-font-colour: #999;
+ --subtext-font-size: 13px;
+
+ --primary-background-colour: #1e1e1e;
+ --secondary-background-colour: #252525;
+
+ --primary-border-colour: #444;
+ --secondary-border-colour: #3c3c3c; /*todo*/
+
+ --title-colour: #fff;
+ --title-weight: bold;
+
+ --banner-font-colour: #c5c5c5;
+ --banner-bg-colour: #333;
+
+
+ /* Operation colours */
+ --op-list-operation-font-colour: #c5c5c5;
+ --op-list-operation-bg-colour: #333;
+ --op-list-operation-border-colour: #444;
+
+ --rec-list-operation-font-colour: #c5c5c5; /*todo*/
+ --rec-list-operation-bg-colour: #333;
+ --rec-list-operation-border-colour: #444;
+
+ --selected-operation-font-color: #c09853; /*todo*/
+ --selected-operation-bg-colour: #fcf8e3;
+ --selected-operation-border-colour: #fbeed5;
+
+ --breakpoint-font-colour: #b94a48; /*todo*/
+ --breakpoint-bg-colour: #f2dede;
+ --breakpoint-border-colour: #eed3d7;
+
+ --breakpoint-font-colour: #b94a48; /*todo*/
+ --breakpoint-bg-colour: #f2dede;
+ --breakpoint-border-colour: #eed3d7;
+
+ --disabled-font-colour: #999; /*todo*/
+ --disabled-bg-colour: #dfdfdf;
+ --disabled-border-colour: #cdcdcd;
+
+ --fc-operation-font-colour: #396f3a; /*todo*/
+ --fc-operation-bg-colour: #c7e4ba;
+ --fc-operation-border-colour: #b3dba2;
+
+ --fc-breakpoint-operation-font-colour: #94312f; /*todo*/
+ --fc-breakpoint-operation-bg-colour: #eabfbf;
+ --fc-breakpoint-operation-border-colour: #e2aeb5;
+
+
+ /* Operation arguments */
+ --arg-title-font-weight: bold; /*todo*/
+ --arg-input-height: 34px;
+ --arg-input-line-height: 20px;
+ --arg-input-font-size: 15px;
+ --arg-font-colour: #bbb;
+ --arg-background: #252525;
+ --arg-border-colour: #205375;
+ --arg-disabled-background: #eee; /*todo*/
+
+
+ /* Buttons */
+ --btn-default-font-colour: #c5c5c5;
+ --btn-default-bg-colour: #3c3c3c;
+ --btn-default-border-colour: #205375;
+
+ --btn-default-hover-font-colour: #c5c5c5;
+ --btn-default-hover-bg-colour: #2d2d2d;
+ --btn-default-hover-border-colour: #205375;
+
+ --btn-success-font-colour: #fff;
+ --btn-success-bg-colour: #073655;
+ --btn-success-border-colour: #0e639c;
+
+ --btn-success-hover-font-colour: #fff;
+ --btn-success-hover-bg-colour: #0e639c;
+ --btn-success-hover-border-colour: #0e639c;
+
+
+ /* Highlighter colours */
+ --hl1: #fff000; /*todo*/
+ --hl2: #95dfff;
+ --hl3: #ffb6b6;
+ --hl4: #fcf8e3;
+ --hl5: #8de768;
+
+
+ /* Scrollbar */
+ --scrollbar-track: #1e1e1e; /* never used */
+ --scrollbar-thumb: #424242;
+ --scrollbar-hover: #4e4e4e;
+
+
+ /* Misc. */
+ --drop-file-border-colour: #3a87ad; /*todo*/
+ --popover-background: #444;
+ --popover-border-colour: #666; /* still working on this */
+}
diff --git a/src/web/stylesheets/themes/_dark.scss b/src/web/stylesheets/themes/_dark.scss
deleted file mode 100644
index ae4e7dfa..00000000
--- a/src/web/stylesheets/themes/_dark.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Dark theme definitions
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-// tabs
-// links
-// disabled buttons
-// popovers
-// toggle-string dropdowns
-// alerts
-
-$primaryFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
-$primaryFontColour: #c5c5c5;
-$primaryFontSize: 14px;
-$primaryLineHeight: 20px;
-
-$fixedWidthFontFamily: "Monaco", "Droid Sans Mono", "Consolas", monospace;
-$fixedWidthFontColour: inherit;
-$fixedWidthFontSize: inherit;
-
-$subtextFontColour: #999;
-$subtextFontSize: 13px;
-
-$primaryBackgroundColour: #1e1e1e;
-$secondaryBackgroundColour: #252525;
-
-$primaryBorderColour: #444;
-$secondaryBorderColour: #3c3c3c; //todo
-
-$titleColour: #fff;
-$titleWeight: bold;
-
-$bannerFontColour: #c5c5c5;
-$bannerBgColour: #333;
-
-
-// Operation colours
-$opListOperationFontColour: #c5c5c5;
-$opListOperationBgColour: #333;
-$opListOperationBorderColour: #444;
-
-$recListOperationFontColour: #c5c5c5; //todo
-$recListOperationBgColour: #333;
-$recListOperationBorderColour: #444;
-
-$selectedOperationFontColor: #c09853; //todo
-$selectedOperationBgColour: #fcf8e3;
-$selectedOperationBorderColour: #fbeed5;
-
-$breakpointFontColour: #b94a48; //todo
-$breakpointBgColour: #f2dede;
-$breakpointBorderColour: #eed3d7;
-
-$breakpointFontColour: #b94a48; //todo
-$breakpointBgColour: #f2dede;
-$breakpointBorderColour: #eed3d7;
-
-$disabledFontColour: #999; //todo
-$disabledBgColour: #dfdfdf;
-$disabledBorderColour: #cdcdcd;
-
-$fcOperationFontColour: #396f3a; //todo
-$fcOperationBgColour: #c7e4ba;
-$fcOperationBorderColour: #b3dba2;
-
-$fcBreakpointOperationFontColour: #94312f; //todo
-$fcBreakpointOperationBgColour: #eabfbf;
-$fcBreakpointOperationBorderColour: #e2aeb5;
-
-
-// Operation arguments
-$argTitleFontWeight: bold; //todo
-$argInputHeight: 34px;
-$argInputLineHeight: 20px;
-$argInputFontSize: 15px;
-$argFontColour: #bbb;
-$argBackground: #252525;
-$argBorderColour: #205375;
-$argDisabledBackground: #eee; //todo
-
-
-// Buttons
-$btnDefaultFontColour: #c5c5c5;
-$btnDefaultBgColour: #3c3c3c;
-$btnDefaultBorderColour: #205375;
-
-$btnDefaultHoverFontColour: #c5c5c5;
-$btnDefaultHoverBgColour: #2d2d2d;
-$btnDefaultHoverBorderColour: #205375;
-
-$btnSuccessFontColour: #fff;
-$btnSuccessBgColour: #073655;
-$btnSuccessBorderColour: #0e639c;
-
-$btnSuccessHoverFontColour: #fff;
-$btnSuccessHoverBgColour: #0e639c;
-$btnSuccessHoverBorderColour: #0e639c;
-
-
-// Highlighter colours
-$hl1: #fff000; //todo
-$hl2: #95dfff;
-$hl3: #ffb6b6;
-$hl4: #fcf8e3;
-$hl5: #8de768;
-
-
-// Scrollbar
-$scrollbarTrack: #1e1e1e;
-$scrollbarThumb: #424242;
-$scrollbarHover: #4e4e4e;
-
-
-// Misc.
-$dropFileBorderColour: #3a87ad; //todo
-$popoverBackground: #444;
-$popoverBorderColour: #666;
diff --git a/src/web/stylesheets/utils/_general.css b/src/web/stylesheets/utils/_general.css
new file mode 100755
index 00000000..bfb41400
--- /dev/null
+++ b/src/web/stylesheets/utils/_general.css
@@ -0,0 +1,73 @@
+/**
+ * General styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+body {
+ font-family: var(--primary-font-family);
+ font-size: var(--primary-font-size);
+ line-height: var(--primary-line-height);
+ color: var(--primary-font-colour);
+ background-color: var(--primary-background-colour);
+}
+
+.subtext {
+ font-style: italic;
+ font-size: var(--subtext-font-size);
+ color: var(--subtext-font-colour);
+}
+
+.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 {
+ user-select: none;
+}
+
+.konami {
+ transform: rotate(180deg);
+}
+
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-thumb);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: var(--scrollbar-hover);
+}
+
+::-webkit-scrollbar-corner {
+ background-color: var(--scrollbar-track);
+}
+
+/* Highlighters */
+.hl1, { background-color: var(--hl1); }
+.hl2, { background-color: var(--hl2); }
+.hl3, { background-color: var(--hl3); } /* Half-Life 3 confirmed :O */
+.hl4, { background-color: var(--hl4); }
+.hl5, { background-color: var(--hl5); }
diff --git a/src/web/stylesheets/utils/_general.scss b/src/web/stylesheets/utils/_general.scss
deleted file mode 100755
index feed17af..00000000
--- a/src/web/stylesheets/utils/_general.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * 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 rotate(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; }
diff --git a/src/web/stylesheets/utils/_mixins.scss b/src/web/stylesheets/utils/_mixins.scss
deleted file mode 100644
index ae925a5d..00000000
--- a/src/web/stylesheets/utils/_mixins.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * 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 rotate($value) {
- -ms-transform: rotate($value);
- -webkit-transform: rotate($value);
- -moz-transform: rotate($value);
- transform: rotate($value);
-}
-
-@mixin translateX($value) {
- -ms-transform: translateX($value);
- -webkit-transform: translateX($value);
- -moz-transform: translateX($value);
- transform: translateX($value);
-}
-
-@mixin translateY($value) {
- -ms-transform: translateY($value);
- -webkit-transform: translateY($value);
- -moz-transform: translateY($value);
- transform: translateY($value);
-}
-
-@mixin translate3d($x, $y, $z) {
- -ms-transform: translate3d($x, $y, $z);
- -webkit-transform: translate3d($x, $y, $z);
- -moz-transform: translate3d($x, $y, $z);
- transform: translate3d($x, $y, $z);
-}
-
-@mixin transition($value) {
- -webkit-transition: $value;
- transition: $value;
-}
-
-@mixin animation($value) {
- -webkit-animation: $value;
- animation: $value;
-}
diff --git a/src/web/stylesheets/utils/_overrides.scss b/src/web/stylesheets/utils/_overrides.css
similarity index 62%
rename from src/web/stylesheets/utils/_overrides.scss
rename to src/web/stylesheets/utils/_overrides.css
index 840170a5..1b140ec2 100755
--- a/src/web/stylesheets/utils/_overrides.scss
+++ b/src/web/stylesheets/utils/_overrides.css
@@ -15,38 +15,38 @@ a:focus {
}
.btn-default {
- color: $btnDefaultFontColour;
- background-color: $btnDefaultBgColour;
- border-color: $btnDefaultBorderColour;
+ color: var(--btn-default-font-colour);
+ background-color: var(--btn-default-bg-colour);
+ border-color: var(--btn-default-border-colour);
}
.btn-default:hover,
.btn-default:active,
.btn-default:hover:active {
- color: $btnDefaultHoverFontColour;
- background-color: $btnDefaultHoverBgColour;
- border-color: $btnDefaultHoverBorderColour;
+ color: var(--btn-default-hover-font-colour);
+ background-color: var(--btn-default-hover-bg-colour);
+ border-color: var(--btn-default-hover-border-colour);
}
.btn-default:focus {
- color: $btnDefaultFontColour;
- background-color: $btnDefaultBgColour;
- border-color: $btnDefaultHoverBorderColour;
+ color: var(--btn-default-font-colour);
+ background-color: var(--btn-default-bg-colour);
+ border-color: var(--btn-default-hover-border-colour);
}
.btn-success {
- color: $btnSuccessFontColour;
- background-color: $btnSuccessBgColour;
- border-color: $btnSuccessBorderColour;
+ color: var(--btn-success-font-colour);
+ background-color: var(--btn-success-bg-colour);
+ border-color: var(--btn-success-border-colour);
}
.btn-success:hover,
.btn-success:active,
.btn-success:focus,
.btn-success:hover:active {
- color: $btnSuccessHoverFontColour;
- background-color: $btnSuccessHoverBgColour;
- border-color: $btnSuccessHoverBorderColour;
+ color: var(--btn-success-hover-font-colour);
+ background-color: var(--btn-success-hover-bg-colour);
+ border-color: var(--btn-success-hover-border-colour);
}
.btn,
@@ -75,12 +75,12 @@ input[type="search"]::-webkit-search-cancel-button {
}
.modal-content {
- background-color: $primaryBackgroundColour;
+ background-color: var(--primary-background-colour);
}
.modal-header,
.modal-footer {
- border-color: $primaryBorderColour;
+ border-color: var(--primary-border-colour);
}
.form-control {
@@ -120,13 +120,13 @@ optgroup {
.popover,
.popover.right>.arrow {
- background-color: $popoverBackground;
- border-color: $popoverBorderColour;
+ background-color: var(--popover-background);
+ border-color: var(--popover-border-colour);
}
.popover.right>.arrow:after {
- // border-color: $popoverBorderColour;
- border-right-color: $popoverBackground;
+ /*border-color: var(--popover-border-colour);*/
+ border-right-color: var(--popover-background);
}