před 8 roky · a4d93f23d6
--- a/src/web/App.js
+++ b/src/web/App.js
@@ -52,6 +52,23 @@ App.prototype.setup = function() {
 
				     this.resetLayout();
			
 
				     this.setCompileMessage();
			
 
				     this.loadURIParams();
			
 
				+    this.loaded();
			
 
				+};
			
 
				+
			
 
				+
			
 
				+/**
			
 
				+ * Fires once all setup activities have completed.
			
 
				+ */
			
 
				+App.prototype.loaded = function() {
			
 
				+    // Trigger CSS animations to remove preloader
			
 
				+    document.body.classList.add("loaded");
			
 
				+
			
 
				+    // Wait for animations to complete then remove the preloader and loaded style
			
 
				+    // so that the animations for existing elements don't play again.
			
 
				+    setTimeout(function() {
			
 
				+        document.getElementById("loader-wrapper").remove();
			
 
				+        document.body.classList.remove("loaded");
			
 
				+    }, 1000);
			
 
				 };
			
 
				 
			
 
				 
			
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -32,6 +32,11 @@
 
				         <link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
			
 
				     </head>
			
 
				     <body>
			
 
				+        <!-- Preloader overlay -->
			
 
				+        <div id="loader-wrapper">
			
 
				+            <div id="preloader"></div>
			
 
				+        </div>
			
 
				+        <!-- End preloader overlay -->
			
 
				         <span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
			
 
				         <div id="alert" class="alert alert-danger">
			
 
				             <button type="button" class="close" id="alert-close">&times;</button>
			
--- a/src/web/stylesheets/components/_alert.scss
+++ b/src/web/stylesheets/components/_alert.scss
@@ -19,4 +19,4 @@
 
				 
			
 
				 #alert a {
			
 
				     text-decoration: underline;
			
 
				-}
			
 
				+}
			
--- a/src/web/stylesheets/components/_button.scss
+++ b/src/web/stylesheets/components/_button.scss
@@ -10,4 +10,4 @@ button img,
 
				 span.btn img {
			
 
				     margin-right: 3px;
			
 
				     margin-bottom: 1px;
			
 
				-}
			
 
				+}
			
--- a/src/web/stylesheets/components/_list.scss
+++ b/src/web/stylesheets/components/_list.scss
@@ -10,4 +10,34 @@
 
				     list-style-type: none;
			
 
				     margin: 0;
			
 
				     padding: 0;
			
 
				+}
			
 
				+
			
 
				+.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;
			
 
				 }
			
--- a/src/web/stylesheets/components/_operation.scss
+++ b/src/web/stylesheets/components/_operation.scss
@@ -190,4 +190,4 @@ button.dropdown-toggle {
 
				     color: $disabledFontColour !important;
			
 
				     background-color: $disabledBgColour !important;
			
 
				     border-color: $disabledBorderColour !important;
			
 
				-}
			
 
				+}
			
--- a/src/web/stylesheets/components/_pane.scss
+++ b/src/web/stylesheets/components/_pane.scss
@@ -25,4 +25,4 @@ $titleHeight: 43px;
 
				     list-style-type: none;
			
 
				     margin: 0;
			
 
				     padding: 0;
			
 
				-}
			
 
				+}
			
--- a/src/web/stylesheets/layout/_banner.scss
+++ b/src/web/stylesheets/layout/_banner.scss
@@ -25,4 +25,4 @@
 
				 #banner img {
			
 
				     margin-bottom: 2px;
			
 
				     margin-left: 8px;
			
 
				-}
			
 
				+}
			
--- a/src/web/stylesheets/layout/_operations.scss
+++ b/src/web/stylesheets/layout/_operations.scss
@@ -10,36 +10,6 @@
 
				     @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;
			
@@ -62,4 +32,4 @@
 
				     background-color: $recListOperationBgColour;
			
 
				     border: 2px dashed $recListOperationFontColour !important;
			
 
				     padding: 8px 8px 9px 8px;
			
 
				-}
			
 
				+}
			
--- a/src/web/stylesheets/layout/_structure.scss
+++ b/src/web/stylesheets/layout/_structure.scss
--- a/src/web/stylesheets/main.scss
+++ b/src/web/stylesheets/main.scss
@@ -16,7 +16,7 @@
 
				 
			
 
				 
			
 
				 // CyberChef styles
			
 
				-// Theme
			
 
				+// Default theme
			
 
				 @import "themes/_classic";
			
 
				 
			
 
				 // Utilities
			
@@ -24,6 +24,9 @@
 
				 @import "utils/_overrides";
			
 
				 @import "utils/_general";
			
 
				 
			
 
				+// Preloader styles
			
 
				+@import "preloader.scss";
			
 
				+
			
 
				 // Components
			
 
				 @import "components/_alert";
			
 
				 @import "components/_button";
			
--- a/src/web/stylesheets/preloader.scss
+++ b/src/web/stylesheets/preloader.scss
@@ -0,0 +1,153 @@
 
				+/**
			
 
				+ * Preloader styles
			
 
				+ *
			
 
				+ * @author n1474335 [n1474335@gmail.com]
			
 
				+ * @copyright Crown Copyright 2017
			
 
				+ * @license Apache-2.0
			
 
				+ */
			
 
				+
			
 
				+#loader-wrapper {
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    z-index: 1000;
			
 
				+    background-color: $secondaryBorderColour;
			
 
				+}
			
 
				+
			
 
				+#preloader {
			
 
				+    display: block;
			
 
				+    position: relative;
			
 
				+    left: 50%;
			
 
				+    top: 50%;
			
 
				+    width: 150px;
			
 
				+    height: 150px;
			
 
				+    margin: -75px 0 0 -75px;
			
 
				+
			
 
				+    border: 3px solid transparent;
			
 
				+    border-top-color: #3498db;
			
 
				+    border-radius: 50%;
			
 
				+    z-index: 1500;
			
 
				+
			
 
				+    @include animation(spin 2s linear infinite);
			
 
				+}
			
 
				+
			
 
				+.loader-arm {
			
 
				+    content: "";
			
 
				+    position: absolute;
			
 
				+    top: 5px;
			
 
				+    left: 5px;
			
 
				+    right: 5px;
			
 
				+    bottom: 5px;
			
 
				+    border: 3px solid transparent;
			
 
				+    border-radius: 50%;
			
 
				+}
			
 
				+
			
 
				+#preloader:before {
			
 
				+    @extend .loader-arm;
			
 
				+    border-top-color: #e74c3c;
			
 
				+    @include animation(spin 3s linear infinite);
			
 
				+}
			
 
				+
			
 
				+#preloader:after {
			
 
				+    @extend .loader-arm;
			
 
				+    border-top-color: #f9c922;
			
 
				+    @include animation(spin 1.5s linear infinite);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/* Loaded */
			
 
				+.loaded #preloader {
			
 
				+    opacity: 0;
			
 
				+    @include transition(all 0.3s ease-out);
			
 
				+}
			
 
				+
			
 
				+.loaded #loader-wrapper {
			
 
				+    opacity: 0;
			
 
				+    @include 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);
			
 
				+}
			
 
				+
			
 
				+.loaded #content-wrapper {
			
 
				+	animation-delay: 0.10s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:first-child {
			
 
				+	animation-delay: 0.20s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(2) {
			
 
				+	animation-delay: 0.25s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(3) {
			
 
				+	animation-delay: 0.30s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(4) {
			
 
				+	animation-delay: 0.35s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(5) {
			
 
				+	animation-delay: 0.40s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(6) {
			
 
				+	animation-delay: 0.45s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(7) {
			
 
				+	animation-delay: 0.50s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(8) {
			
 
				+	animation-delay: 0.55s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(9) {
			
 
				+	animation-delay: 0.60s;
			
 
				+}
			
 
				+
			
 
				+.loaded #rec-list li:nth-child(10) {
			
 
				+	animation-delay: 0.65s;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+// Animations
			
 
				+
			
 
				+@-webkit-keyframes spin {
			
 
				+    0%   {
			
 
				+        @include rotate(0deg);
			
 
				+    }
			
 
				+    100% {
			
 
				+        @include rotate(360deg);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+@keyframes spin {
			
 
				+    0%   {
			
 
				+        @include rotate(0deg);
			
 
				+    }
			
 
				+    100% {
			
 
				+        @include rotate(360deg);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+@-webkit-keyframes bump {
			
 
				+	from {
			
 
				+        opacity: 0;
			
 
				+        @include translate3d(0, 200px, 0);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+@keyframes bump {
			
 
				+	from {
			
 
				+        opacity: 0;
			
 
				+        @include translate3d(0, 200px, 0);
			
 
				+    }
			
 
				+}
			
--- a/src/web/stylesheets/themes/_classic.scss
+++ b/src/web/stylesheets/themes/_classic.scss
@@ -72,6 +72,14 @@ $argBackground: #fff;
 
				 $argDisabledBackground: #eee;
			
 
				 
			
 
				 
			
 
				+// Highlighter colours
			
 
				+$hl1: #fff000;
			
 
				+$hl2: #95dfff;
			
 
				+$hl3: #ffb6b6;
			
 
				+$hl4: #fcf8e3;
			
 
				+$hl5: #8de768;
			
 
				+
			
 
				+
			
 
				 // Misc.
			
 
				 $dropFileBorderColour: #3a87ad;
			
 
				 
			
@@ -81,10 +89,3 @@ $bannerBgColour: #dff0d8;
 
				 $scrollbarTrack: $secondaryBackgroundColour;
			
 
				 $scrollbarThumb: #ccc;
			
 
				 $scrollbarHover: #bbb;
			
 
				-
			
 
				-// Highlighter colours
			
 
				-$hl1: #fff000;
			
 
				-$hl2: #95dfff;
			
 
				-$hl3: #ffb6b6;
			
 
				-$hl4: #fcf8e3;
			
 
				-$hl5: #8de768;
			
--- a/src/web/stylesheets/utils/_general.scss
+++ b/src/web/stylesheets/utils/_general.scss
@@ -41,7 +41,7 @@ body {
 
				 }
			
 
				 
			
 
				 .konami {
			
 
				-    @include transform(180deg);
			
 
				+    @include rotate(180deg);
			
 
				 }
			
 
				 
			
 
				 ::-webkit-scrollbar {
			
--- a/src/web/stylesheets/utils/_mixins.scss
+++ b/src/web/stylesheets/utils/_mixins.scss
@@ -21,9 +21,40 @@
 
				     user-select: $value;
			
 
				 }
			
 
				 
			
 
				-@mixin transform($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;
			
 
				+}
			
--- a/src/web/stylesheets/utils/_overrides.scss
+++ b/src/web/stylesheets/utils/_overrides.scss
@@ -118,4 +118,4 @@ optgroup {
 
				 .colorpicker-color,
			
 
				 .colorpicker-color div {
			
 
				     height: 100px;
			
 
				-}
			
 
				+}