Cool_Tools/CyberChef
1
0
Fork 0
mirror of synced 2024-11-15 18:53:22 +01:00
Code Releases Activity

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

Browse Source
This commit is contained in:
n1474335 2017-04-24 23:59:35 +01:00
parent e3f41fea9c
commit d71ac2e894
27 changed files with 527 additions and 603 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/web/html/index.html
View File

@ -20,7 +20,7 @@
--> -->
<!-- htmlmin:ignore --> <!-- htmlmin:ignore -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="classic">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>CyberChef</title> <title>CyberChef</title>
@ -66,13 +66,13 @@
<div id="operations" class="split split-horizontal no-select"> <div id="operations" class="split split-horizontal no-select">
<div class="title no-select">Operations</div> <div class="title no-select">Operations</div>
<input type="search" class="form-control" id="search" placeholder="Search..." autocomplete="off"> <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 class="panel-group no-select" id="categories"></div>
</div> </div>
<div id="recipe" class="split split-horizontal no-select"> <div id="recipe" class="split split-horizontal no-select">
<div class="title no-select">Recipe</div> <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="controls" class="no-select">
<div id="operational-controls"> <div id="operational-controls">

2
src/web/index.js
View File

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

0
src/web/stylesheets/components/_alert.scss → src/web/stylesheets/components/_alert.css
View File

0
src/web/stylesheets/components/_button.scss → src/web/stylesheets/components/_button.css
View File

14
src/web/stylesheets/components/_list.scss → src/web/stylesheets/components/_list.css
View File

@ -15,25 +15,25 @@
.category-title { .category-title {
display: block; display: block;
padding: 10px; padding: 10px;
background-color: $secondaryBackgroundColour; background-color: var(--secondary-background-colour);
border-bottom: 1px solid $secondaryBorderColour; border-bottom: 1px solid var(--secondary-border-colour);
font-weight: $titleWeight; font-weight: var(--title-weight);
} }
.category-title[href='#catFavourites'] { .category-title[href='#catFavourites'] {
border-bottom-color: $primaryBorderColour; border-bottom-color: var(--primary-border-colour);
} }
.category-title[aria-expanded=true] { .category-title[aria-expanded=true] {
border-bottom-color: $primaryBorderColour; border-bottom-color: var(--primary-border-colour);
} }
.category-title.collapsed { .category-title.collapsed {
border-bottom-color: $secondaryBorderColour; border-bottom-color: var(--secondary-border-colour);
} }
.category-title:hover { .category-title:hover {
color: $opListOperationFontColour; color: var(--op-list-operation-font-colour);
} }
.category { .category {

64
src/web/stylesheets/components/_operation.scss → src/web/stylesheets/components/_operation.css
View File

@ -44,7 +44,7 @@
} }
.arg-title { .arg-title {
font-weight: $argTitleFontWeight; font-weight: var(--arg-title-font-weight);
} }
.arg-input { .arg-input {
@ -52,13 +52,13 @@
width: 100%; width: 100%;
padding: 6px 12px; padding: 6px 12px;
vertical-align: middle; vertical-align: middle;
height: $argInputHeight; height: var(--arg-input-height);
font-size: $argInputFontSize; font-size: var(--arg-input-font-size);
line-height: $argInputLineHeight; line-height: var(--arg-input-line-height);
color: $argFontColour; color: var(--arg-font-colour);
background-color: $argBackground; background-color: var(--arg-background);
border: 1px solid $argBorderColour; border: 1px solid var(--arg-border-colour);
font-family: $fixedWidthFontFamily; font-family: var(--fixed-width-font-family);
} }
.short-string { .short-string {
@ -69,15 +69,15 @@ select {
display: block; display: block;
padding: 6px 8px; padding: 6px 8px;
height: 34px; height: 34px;
border: 1px solid $argBorderColour; border: 1px solid var(--arg-border-colour);
background-color: $argBackground; background-color: var(--arg-background);
color: $argFontColour; color: var(--arg-font-colour);
} }
.arg[disabled] { .arg[disabled] {
cursor: not-allowed; cursor: not-allowed;
opacity: 1; opacity: 1;
background-color: $argDisabledBackground; background-color: var(--arg-disabled-background);
} }
textarea.arg { textarea.arg {
@ -85,11 +85,11 @@ textarea.arg {
min-height: 50px; min-height: 50px;
height: 70px; height: 70px;
margin-top: 5px; margin-top: 5px;
border: 1px solid $argBorderColour; border: 1px solid var(--arg-border-colour);
resize: vertical; resize: vertical;
color: $argFontColour; color: var(--arg-font-colour);
background-color: $argBackground; background-color: var(--arg-background);
font-family: $fixedWidthFontFamily; font-family: var(--fixed-width-font-family);
} }
.arg-label { .arg-label {
@ -120,7 +120,7 @@ textarea.arg {
} }
button.dropdown-toggle { button.dropdown-toggle {
background-color: $secondaryBackgroundColour; background-color: var(--secondary-background-colour);
} }
.op-icon { .op-icon {
@ -166,31 +166,31 @@ button.dropdown-toggle {
} }
.break { .break {
color: $breakpointFontColour !important; color: var(--breakpoint-font-colour) !important;
background-color: $breakpointBgColour !important; background-color: var(--breakpoint-bg-colour) !important;
border-color: $breakpointBorderColour !important; border-color: var(--breakpoint-border-colour) !important;
} }
.selected-op { .selected-op {
color: $selectedOperationFontColor !important; color: var(--selected-operation-font-color) !important;
background-color: $selectedOperationBgColour !important; background-color: var(--selected-operation-bg-colour) !important;
border-color: $selectedOperationBorderColour !important; border-color: var(--selected-operation-border-colour) !important;
} }
.flow-control-op { .flow-control-op {
color: $fcOperationFontColour !important; color: var(--fc-operation-font-colour) !important;
background-color: $fcOperationBgColour !important; background-color: var(--fc-operation-bg-colour) !important;
border-color: $fcOperationBorderColour !important; border-color: var(--fc-operation-border-colour) !important;
} }
.flow-control-op.break { .flow-control-op.break {
color: $fcBreakpointOperationFontColour !important; color: var(--fc-breakpoint-operation-font-colour) !important;
background-color: $fcBreakpointOperationBgColour !important; background-color: var(--fc-breakpoint-operation-bg-colour) !important;
border-color: $fcBreakpointOperationBorderColour !important; border-color: var(--fc-breakpoint-operation-border-colour) !important;
} }
.disabled { .disabled {
color: $disabledFontColour !important; color: var(--disabled-font-colour) !important;
background-color: $disabledBgColour !important; background-color: var(--disabled-bg-colour) !important;
border-color: $disabledBorderColour !important; border-color: var(--disabled-border-colour) !important;
} }

16
src/web/stylesheets/components/_pane.scss → src/web/stylesheets/components/_pane.css
View File

@ -6,20 +6,22 @@
* @license Apache-2.0 * @license Apache-2.0
*/ */
$titleHeight: 43px; :root {
--title-height: 43px;
}
.title { .title {
padding: 10px; padding: 10px;
height: $titleHeight; height: var(--title-height);
border-bottom: 1px solid $primaryBorderColour; border-bottom: 1px solid var(--primary-border-colour);
font-weight: $titleWeight; font-weight: var(--title-weight);
color: $titleColour; color: var(--title-colour);
background-color: $secondaryBackgroundColour; background-color: var(--secondary-background-colour);
} }
.list-area { .list-area {
position: absolute; position: absolute;
top: $titleHeight; top: var(--title-height);
bottom: 0; bottom: 0;
width: 100%; width: 100%;
list-style-type: none; list-style-type: none;

6
src/web/stylesheets/layout/_banner.scss → src/web/stylesheets/layout/_banner.css
View File

@ -12,9 +12,9 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
border-bottom: 1px solid $primaryBorderColour; border-bottom: 1px solid var(--primary-border-colour);
color: $bannerFontColour; color: var(--banner-font-colour);
background-color: $bannerBgColour; background-color: var(--banner-bg-colour);
} }
.banner-right { .banner-right {

20
src/web/stylesheets/layout/_controls.scss → src/web/stylesheets/layout/_controls.css
View File

@ -6,21 +6,23 @@
* @license Apache-2.0 * @license Apache-2.0
*/ */
$controlsHeight: 120px; :root {
$controlsDivision: 65%; --controls-height: 120px;
--controls-division: 65%;
}
#controls { #controls {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: $controlsHeight; height: var(--controls-height);
bottom: 0; bottom: 0;
padding: 10px; padding: 10px;
border-top: 1px solid $primaryBorderColour; border-top: 1px solid var(--primary-border-colour);
background-color: $secondaryBackgroundColour; background-color: var(--secondary-background-colour);
} }
#operational-controls { #operational-controls {
width: $controlsDivision; width: var(--controls-division);
float: left; float: left;
text-align: center; text-align: center;
} }
@ -44,11 +46,11 @@ $controlsDivision: 65%;
width: 60px; width: 60px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-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 { #auto-bake-label:hover {
border-left-color: $btnSuccessHoverBorderColour; border-left-color: var(--btn-success-hover-border-colour);
} }
#auto-bake-label div { #auto-bake-label div {
@ -58,6 +60,6 @@ $controlsDivision: 65%;
#extra-controls { #extra-controls {
float: right; float: right;
width: 100% - $controlsDivision; width: calc(100% - var(--controls-division));
padding-left: 10px; padding-left: 10px;
} }

20
src/web/stylesheets/layout/_io.scss → src/web/stylesheets/layout/_io.css
View File

@ -6,7 +6,9 @@
* @license Apache-2.0 * @license Apache-2.0
*/ */
.io-textarea { #input-text,
#output-text,
#output-html {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -22,13 +24,7 @@
word-wrap: break-word; word-wrap: break-word;
} }
#input-text,
#output-text {
@extend .io-textarea;
}
#output-html { #output-html {
@extend .io-textarea;
display: none; display: none;
overflow-y: auto; overflow-y: auto;
-moz-padding-start: 1px; /* Fixes bug in Firefox */ -moz-padding-start: 1px; /* Fixes bug in Firefox */
@ -44,9 +40,9 @@
.textarea-wrapper textarea, .textarea-wrapper textarea,
.textarea-wrapper div { .textarea-wrapper div {
font-family: $fixedWidthFontFamily; font-family: var(--fixed-width-font-family);
font-size: $fixedWidthFontSize; font-size: var(--fixed-width-font-size);
color: $fixedWidthFontColour; color: var(--fixed-width-font-colour);
} }
#input-highlighter, #input-highlighter,
@ -79,7 +75,7 @@
height: 30px; height: 30px;
text-align: right; text-align: right;
line-height: 10px; line-height: 10px;
font-family: $fixedWidthFontFamily; font-family: var(--fixed-width-font-family);
font-weight: normal; font-weight: normal;
font-size: 8pt; font-size: 8pt;
} }
@ -89,7 +85,7 @@
} }
.dropping-file { .dropping-file {
border: 5px dashed $dropFileBorderColour !important; border: 5px dashed var(--drop-file-border-colour) !important;
} }
.loading_file { .loading_file {

18
src/web/stylesheets/layout/_modals.scss → src/web/stylesheets/layout/_modals.css
View File

@ -20,11 +20,11 @@
height: 28px; height: 28px;
padding: 3px 10px; padding: 3px 10px;
vertical-align: middle; vertical-align: middle;
font-size: $argInputFontSize - 1px; font-size: calc(var(--arg-input-font-size) - 1px);
line-height: $argInputLineHeight; line-height: var(--arg-input-line-height);
color: $argFontColour; color: var(--arg-font-colour);
background-color: $argBackground; background-color: var(--arg-background);
border: 1px solid $primaryBorderColour; border: 1px solid var(--primary-border-colour);
} }
.option-item select { .option-item select {
@ -34,7 +34,7 @@
#edit-favourites-list { #edit-favourites-list {
margin: 10px; margin: 10px;
border: 1px solid $opListOperationBorderColour; border: 1px solid var(--op-list-operation-border-colour);
} }
#edit-favourites-list .operation { #edit-favourites-list .operation {
@ -67,14 +67,14 @@
#save-footer { #save-footer {
border-top: none; border-top: none;
margin-top: 0; margin-top: 0;
border-bottom: 1px solid $primaryBorderColour; border-bottom: 1px solid var(--primary-border-colour);
} }
#support-modal textarea { #support-modal textarea {
font-family: $primaryFontFamily; font-family: var(--primary-font-family);
} }
#save-text, #save-text,
#load-text { #load-text {
font-family: $fixedWidthFontFamily; font-family: var(--fixed-width-font-family);
} }

31
src/web/stylesheets/layout/_operations.css Normal file
View File

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

35
src/web/stylesheets/layout/_operations.scss
View File

@ -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
src/web/stylesheets/layout/_recipe.css Normal file
View File

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

19
src/web/stylesheets/layout/_recipe.scss
View File

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

4
src/web/stylesheets/layout/_structure.scss → src/web/stylesheets/layout/_structure.css
View File

@ -34,7 +34,7 @@ div#output {
} }
.split { .split {
@include box-sizing(border-box); box-sizing: border-box;
overflow: auto; overflow: auto;
position: relative; position: relative;
} }
@ -45,7 +45,7 @@ div#output {
} }
.gutter { .gutter {
background-color: $secondaryBorderColour; background-color: var(--secondary-border-colour);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50%; background-position: 50%;
} }

44
src/web/stylesheets/main.js Normal file
View File

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

44
src/web/stylesheets/main.scss
View File

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

44
src/web/stylesheets/preloader.scss → src/web/stylesheets/preloader.css
View File

@ -13,7 +13,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1000; z-index: 1000;
background-color: $secondaryBorderColour; background-color: var(--secondary-border-colour);
} }
#preloader { #preloader {
@ -30,10 +30,11 @@
border-radius: 50%; border-radius: 50%;
z-index: 1500; z-index: 1500;
@include animation(spin 2s linear infinite); animation: spin 2s linear infinite;
} }
.loader-arm { #preloader:before,
#preloader:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -45,31 +46,29 @@
} }
#preloader:before { #preloader:before {
@extend .loader-arm;
border-top-color: #e74c3c; border-top-color: #e74c3c;
@include animation(spin 3s linear infinite); animation: spin 3s linear infinite;
} }
#preloader:after { #preloader:after {
@extend .loader-arm;
border-top-color: #f9c922; border-top-color: #f9c922;
@include animation(spin 1.5s linear infinite); animation: spin 1.5s linear infinite;
} }
/* Loaded */ /* Loaded */
.loaded #preloader { .loaded #preloader {
opacity: 0; opacity: 0;
@include transition(all 0.3s ease-out); transition: all 0.3s ease-out;
} }
.loaded #loader-wrapper { .loaded #loader-wrapper {
opacity: 0; opacity: 0;
@include transition(all 0.5s 0.3s ease-out); transition: all 0.5s 0.3s ease-out;
} }
.loaded #rec-list li { .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 { .loaded #content-wrapper {
@ -117,37 +116,20 @@
} }
// Animations /* Animations */
@-webkit-keyframes spin {
0% {
@include rotate(0deg);
}
100% {
@include rotate(360deg);
}
}
@keyframes spin { @keyframes spin {
0% { 0% {
@include rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
@include rotate(360deg); transform: rotate(360deg);
}
}
@-webkit-keyframes bump {
from {
opacity: 0;
@include translate3d(0, 200px, 0);
} }
} }
@keyframes bump { @keyframes bump {
from { from {
opacity: 0; opacity: 0;
@include translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0);
} }
} }

116
src/web/stylesheets/themes/_classic.css Executable file
View File

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

114
src/web/stylesheets/themes/_classic.scss
View File

@ -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
src/web/stylesheets/themes/_dark.css Normal file
View File

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

121
src/web/stylesheets/themes/_dark.scss
View File

@ -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
src/web/stylesheets/utils/_general.css Executable file
View File

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

73
src/web/stylesheets/utils/_general.scss
View File

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

60
src/web/stylesheets/utils/_mixins.scss
View File

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

42
src/web/stylesheets/utils/_overrides.scss → src/web/stylesheets/utils/_overrides.css
View File

@ -15,38 +15,38 @@ a:focus {
} }
.btn-default { .btn-default {
color: $btnDefaultFontColour; color: var(--btn-default-font-colour);
background-color: $btnDefaultBgColour; background-color: var(--btn-default-bg-colour);
border-color: $btnDefaultBorderColour; border-color: var(--btn-default-border-colour);
} }
.btn-default:hover, .btn-default:hover,
.btn-default:active, .btn-default:active,
.btn-default:hover:active { .btn-default:hover:active {
color: $btnDefaultHoverFontColour; color: var(--btn-default-hover-font-colour);
background-color: $btnDefaultHoverBgColour; background-color: var(--btn-default-hover-bg-colour);
border-color: $btnDefaultHoverBorderColour; border-color: var(--btn-default-hover-border-colour);
} }
.btn-default:focus { .btn-default:focus {
color: $btnDefaultFontColour; color: var(--btn-default-font-colour);
background-color: $btnDefaultBgColour; background-color: var(--btn-default-bg-colour);
border-color: $btnDefaultHoverBorderColour; border-color: var(--btn-default-hover-border-colour);
} }
.btn-success { .btn-success {
color: $btnSuccessFontColour; color: var(--btn-success-font-colour);
background-color: $btnSuccessBgColour; background-color: var(--btn-success-bg-colour);
border-color: $btnSuccessBorderColour; border-color: var(--btn-success-border-colour);
} }
.btn-success:hover, .btn-success:hover,
.btn-success:active, .btn-success:active,
.btn-success:focus, .btn-success:focus,
.btn-success:hover:active { .btn-success:hover:active {
color: $btnSuccessHoverFontColour; color: var(--btn-success-hover-font-colour);
background-color: $btnSuccessHoverBgColour; background-color: var(--btn-success-hover-bg-colour);
border-color: $btnSuccessHoverBorderColour; border-color: var(--btn-success-hover-border-colour);
} }
.btn, .btn,
@ -75,12 +75,12 @@ input[type="search"]::-webkit-search-cancel-button {
} }
.modal-content { .modal-content {
background-color: $primaryBackgroundColour; background-color: var(--primary-background-colour);
} }
.modal-header, .modal-header,
.modal-footer { .modal-footer {
border-color: $primaryBorderColour; border-color: var(--primary-border-colour);
} }
.form-control { .form-control {
@ -120,13 +120,13 @@ optgroup {
.popover, .popover,
.popover.right>.arrow { .popover.right>.arrow {
background-color: $popoverBackground; background-color: var(--popover-background);
border-color: $popoverBorderColour; border-color: var(--popover-border-colour);
} }
.popover.right>.arrow:after { .popover.right>.arrow:after {
// border-color: $popoverBorderColour; /*border-color: var(--popover-border-colour);*/
border-right-color: $popoverBackground; border-right-color: var(--popover-background);
} }