From d71ac2e8945fec9cb86d3f3b94d568c3617ec525 Mon Sep 17 00:00:00 2001 From: n1474335 Date: Mon, 24 Apr 2017 23:59:35 +0100 Subject: [PATCH] Moved from Sass to CSS with custom properties, allowing for dynamic theme changes. --- src/web/html/index.html | 6 +- src/web/index.js | 2 +- .../components/{_alert.scss => _alert.css} | 0 .../components/{_button.scss => _button.css} | 0 .../components/{_list.scss => _list.css} | 14 +- .../{_operation.scss => _operation.css} | 64 ++++----- .../components/{_pane.scss => _pane.css} | 16 ++- .../layout/{_banner.scss => _banner.css} | 6 +- .../layout/{_controls.scss => _controls.css} | 20 +-- .../stylesheets/layout/{_io.scss => _io.css} | 20 ++- .../layout/{_modals.scss => _modals.css} | 18 +-- src/web/stylesheets/layout/_operations.css | 31 +++++ src/web/stylesheets/layout/_operations.scss | 35 ----- src/web/stylesheets/layout/_recipe.css | 18 +++ src/web/stylesheets/layout/_recipe.scss | 19 --- .../{_structure.scss => _structure.css} | 4 +- src/web/stylesheets/main.js | 44 ++++++ src/web/stylesheets/main.scss | 44 ------ .../{preloader.scss => preloader.css} | 44 ++---- src/web/stylesheets/themes/_classic.css | 116 ++++++++++++++++ src/web/stylesheets/themes/_classic.scss | 114 ---------------- src/web/stylesheets/themes/_dark.css | 126 ++++++++++++++++++ src/web/stylesheets/themes/_dark.scss | 121 ----------------- src/web/stylesheets/utils/_general.css | 73 ++++++++++ src/web/stylesheets/utils/_general.scss | 73 ---------- src/web/stylesheets/utils/_mixins.scss | 60 --------- .../utils/{_overrides.scss => _overrides.css} | 42 +++--- 27 files changed, 527 insertions(+), 603 deletions(-) rename src/web/stylesheets/components/{_alert.scss => _alert.css} (100%) rename src/web/stylesheets/components/{_button.scss => _button.css} (100%) rename src/web/stylesheets/components/{_list.scss => _list.css} (57%) rename src/web/stylesheets/components/{_operation.scss => _operation.css} (72%) rename src/web/stylesheets/components/{_pane.scss => _pane.css} (50%) rename src/web/stylesheets/layout/{_banner.scss => _banner.css} (72%) rename src/web/stylesheets/layout/{_controls.scss => _controls.css} (65%) rename src/web/stylesheets/layout/{_io.scss => _io.css} (97%) rename src/web/stylesheets/layout/{_modals.scss => _modals.css} (69%) create mode 100644 src/web/stylesheets/layout/_operations.css delete mode 100644 src/web/stylesheets/layout/_operations.scss create mode 100644 src/web/stylesheets/layout/_recipe.css delete mode 100644 src/web/stylesheets/layout/_recipe.scss rename src/web/stylesheets/layout/{_structure.scss => _structure.css} (98%) create mode 100644 src/web/stylesheets/main.js delete mode 100644 src/web/stylesheets/main.scss rename src/web/stylesheets/{preloader.scss => preloader.css} (69%) create mode 100755 src/web/stylesheets/themes/_classic.css delete mode 100755 src/web/stylesheets/themes/_classic.scss create mode 100644 src/web/stylesheets/themes/_dark.css delete mode 100644 src/web/stylesheets/themes/_dark.scss create mode 100755 src/web/stylesheets/utils/_general.css delete mode 100755 src/web/stylesheets/utils/_general.scss delete mode 100644 src/web/stylesheets/utils/_mixins.scss rename src/web/stylesheets/utils/{_overrides.scss => _overrides.css} (62%) diff --git a/src/web/html/index.html b/src/web/html/index.html index 9ba8ff8b..9da30f7c 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -20,7 +20,7 @@ --> - + CyberChef @@ -66,13 +66,13 @@
Operations
- +
Recipe
- +
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); }