We use cookies to ensure you get the best experience on our website
Halaman utama Jelajahi Bantuan
Daftar Masuk
0ct0pu5
/
CyberChef
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

Moved from Sass to CSS with custom properties, allowing for dynamic theme changes.

n1474335 8 tahun lalu
induk
e3f41fea9c
melakukan
d71ac2e894
27 mengubah file dengan 527 tambahan dan 603 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 3 3
      src/web/html/index.html
  2. 1 1
      src/web/index.js
  3. 0 0
      src/web/stylesheets/components/_alert.css
  4. 0 0
      src/web/stylesheets/components/_button.css
  5. 7 7
      src/web/stylesheets/components/_list.css
  6. 32 32
      src/web/stylesheets/components/_operation.css
  7. 9 7
      src/web/stylesheets/components/_pane.css
  8. 3 3
      src/web/stylesheets/layout/_banner.css
  9. 11 9
      src/web/stylesheets/layout/_controls.css
  10. 8 12
      src/web/stylesheets/layout/_io.css
  11. 9 9
      src/web/stylesheets/layout/_modals.css
  12. 31 0
      src/web/stylesheets/layout/_operations.css
  13. 0 35
      src/web/stylesheets/layout/_operations.scss
  14. 18 0
      src/web/stylesheets/layout/_recipe.css
  15. 0 19
      src/web/stylesheets/layout/_recipe.scss
  16. 2 2
      src/web/stylesheets/layout/_structure.css
  17. 44 0
      src/web/stylesheets/main.js
  18. 0 44
      src/web/stylesheets/main.scss
  19. 13 31
      src/web/stylesheets/preloader.css
  20. 116 0
      src/web/stylesheets/themes/_classic.css
  21. 0 114
      src/web/stylesheets/themes/_classic.scss
  22. 126 0
      src/web/stylesheets/themes/_dark.css
  23. 0 121
      src/web/stylesheets/themes/_dark.scss
  24. 73 0
      src/web/stylesheets/utils/_general.css
  25. 0 73
      src/web/stylesheets/utils/_general.scss
  26. 0 60
      src/web/stylesheets/utils/_mixins.scss
  27. 21 21
      src/web/stylesheets/utils/_overrides.css

+ 3 - 3
src/web/html/index.html
Tampilan Berkas 

@@ -20,7 +20,7 @@
 
 -->
 
 <!-- htmlmin:ignore -->
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="en" class="classic">
 
     <head>
 
         <meta charset="UTF-8">
 
         <title>CyberChef</title>
 
@@ -66,13 +66,13 @@
 
                 <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">
 
-                    <ul class="op-list" id="search-results"></ul>
 
+                    <ul class="op-list list-area" id="search-results"></ul>
 
                     <div class="panel-group no-select" id="categories"></div>
 
                 </div>
 
                 
                 <div id="recipe" class="split split-horizontal no-select">
 
                     <div class="title no-select">Recipe</div>
 
-                    <ul id="rec-list" class="no-select"></ul>
 
+                    <ul id="rec-list" class="list-area no-select"></ul>
 
                     
                     <div id="controls" class="no-select">
 
                         <div id="operational-controls">

+ 1 - 1
src/web/index.js
Tampilan Berkas 

@@ -5,7 +5,7 @@
 
  */
 
 
 // Styles
 
-import "./stylesheets/main.scss";
 
+import "./stylesheets/main.js";
 
 
 // Libs
 
 import "babel-polyfill";

+ 0 - 0
src/web/stylesheets/components/_alert.scss → src/web/stylesheets/components/_alert.css
Tampilan Berkas


+ 0 - 0
src/web/stylesheets/components/_button.scss → src/web/stylesheets/components/_button.css
Tampilan Berkas


+ 7 - 7
src/web/stylesheets/components/_list.scss → src/web/stylesheets/components/_list.css
Tampilan Berkas 

@@ -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 {

+ 32 - 32
src/web/stylesheets/components/_operation.scss → src/web/stylesheets/components/_operation.css
Tampilan Berkas 

@@ -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;
 
 }

+ 9 - 7
src/web/stylesheets/components/_pane.scss → src/web/stylesheets/components/_pane.css
Tampilan Berkas 

@@ -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;

+ 3 - 3
src/web/stylesheets/layout/_banner.scss → src/web/stylesheets/layout/_banner.css
Tampilan Berkas 

@@ -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 {

+ 11 - 9
src/web/stylesheets/layout/_controls.scss → src/web/stylesheets/layout/_controls.css
Tampilan Berkas 

@@ -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;
 
 }

+ 8 - 12
src/web/stylesheets/layout/_io.scss → src/web/stylesheets/layout/_io.css
Tampilan Berkas 

@@ -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 {

+ 9 - 9
src/web/stylesheets/layout/_modals.scss → src/web/stylesheets/layout/_modals.css
Tampilan Berkas 

@@ -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);
 
 }

+ 31 - 0
src/web/stylesheets/layout/_operations.css
Tampilan Berkas 

@@ -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;
 
+}

+ 0 - 35
src/web/stylesheets/layout/_operations.scss
Tampilan Berkas 

@@ -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;
 
-}

+ 18 - 0
src/web/stylesheets/layout/_recipe.css
Tampilan Berkas 

@@ -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);
 
+}

+ 0 - 19
src/web/stylesheets/layout/_recipe.scss
Tampilan Berkas 

@@ -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;
 
-}

+ 2 - 2
src/web/stylesheets/layout/_structure.scss → src/web/stylesheets/layout/_structure.css
Tampilan Berkas 

@@ -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%;
 
 }

+ 44 - 0
src/web/stylesheets/main.js
Tampilan Berkas 

@@ -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";

+ 0 - 44
src/web/stylesheets/main.scss
Tampilan Berkas 

@@ -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";

+ 13 - 31
src/web/stylesheets/preloader.scss → src/web/stylesheets/preloader.css
Tampilan Berkas 

@@ -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);
 
     }
 
 }

+ 116 - 0
src/web/stylesheets/themes/_classic.css
Tampilan Berkas 

@@ -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;
 
+}

+ 0 - 114
src/web/stylesheets/themes/_classic.scss
Tampilan Berkas 

@@ -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;

+ 126 - 0
src/web/stylesheets/themes/_dark.css
Tampilan Berkas 

@@ -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 */
 
+}

+ 0 - 121
src/web/stylesheets/themes/_dark.scss
Tampilan Berkas 

@@ -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;

+ 73 - 0
src/web/stylesheets/utils/_general.css
Tampilan Berkas 

@@ -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); }

+ 0 - 73
src/web/stylesheets/utils/_general.scss
Tampilan Berkas 

@@ -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; }

+ 0 - 60
src/web/stylesheets/utils/_mixins.scss
Tampilan Berkas 

@@ -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;
 
-}

+ 21 - 21
src/web/stylesheets/utils/_overrides.scss → src/web/stylesheets/utils/_overrides.css
Tampilan Berkas 

@@ -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);
 
 }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5