Mirror
/
CyberChef
mirror of https://github.com/gchq/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Styles rewritten in a modular format with themable properties stored in variables.

This commit is contained in:
n1474335 2017-04-13 17:59:37 +01:00
parent e120422b05
commit e0e5670d0e
19 changed files with 834 additions and 658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,7 @@
<span id="alert-content"></span>
</div>
<div id="content-wrapper">
<div id="banner" class="green">
<div id="banner">
<% if (htmlWebpackPlugin.options.inline) { %>
<span style="float: left; margin-left: 10px;">Compile time: <%= htmlWebpackPlugin.options.compileTime %></span>
<% } else { %>
@ -57,7 +57,7 @@
<a href="#" id="support" class="banner-right" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
<a href="#" id="options" class="banner-right">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
</div>
<div id="wrapper">
<div id="workspace-wrapper">
<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">
@ -163,6 +163,7 @@
<input type="checkbox" id="save-link-recipe-checkbox" checked> <label for="save-link-recipe-checkbox"> Include recipe </label>
<input type="checkbox" id="save-link-input-checkbox" checked> <label for="save-link-input-checkbox"> Include input </label>
</div>
<br>
<a id="save-link" style="word-wrap: break-word;"></a>
</div>
</div>

22
src/web/stylesheets/components/_alert.scss Normal file
View File

@ -0,0 +1,22 @@
/**
* Alert styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
#alert {
position: fixed;
width: 30%;
margin: 30px auto;
top: 10px;
left: 0;
right: 0;
z-index: 2000;
display: none;
}
#alert a {
text-decoration: underline;
}

13
src/web/stylesheets/components/_button.scss Normal file
View File

@ -0,0 +1,13 @@
/**
* Button styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
button img,
span.btn img {
margin-right: 3px;
margin-bottom: 1px;
}

13
src/web/stylesheets/components/_list.scss Normal file
View File

@ -0,0 +1,13 @@
/**
* Operation list styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
.op-list {
list-style-type: none;
margin: 0;
padding: 0;
}

193
src/web/stylesheets/components/_operation.scss Normal file
View File

@ -0,0 +1,193 @@
/**
* Operation styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
.operation {
cursor: pointer;
padding: 10px;
list-style-type: none;
position: relative;
border-width: 1px;
border-style: solid;
border-top-width: 0;
}
.arg-group {
display: table;
width: 100%;
margin-top: 10px;
}
.arg-group-text {
display: block;
}
.inline-args {
float: left;
width: auto;
margin-right: 30px;
height: 34px;
}
.inline-args input[type="checkbox"] {
margin-top: 10px;
}
.inline-args input[type="number"] {
width: 100px;
}
.arg-title {
font-weight: $argTitleFontWeight;
}
.arg-input {
display: table-cell;
width: 100%;
padding: 6px 12px;
vertical-align: middle;
height: $argInputHeight;
font-size: $argInputFontSize;
line-height: $argInputLineHeight;
color: $argFontColour;
background-color: $argBackground;
border: 1px solid $primaryBorderColour;
font-family: $fixedWidthFontFamily;
}
.short-string {
width: 150px;
}
select {
display: block;
padding: 6px 8px;
height: 34px;
border: 1px solid $primaryBorderColour;
background-color: $argBackground;
color: $argFontColour;
}
.arg[disabled] {
cursor: not-allowed;
opacity: 1;
background-color: $argDisabledBackground;
}
textarea.arg {
width: 100%;
min-height: 50px;
height: 70px;
margin-top: 5px;
border: 1px solid $primaryBorderColour;
resize: vertical;
color: $argFontColour;
font-family: $fixedWidthFontFamily;
}
.arg-label {
display: table-cell;
width: 1px;
padding-right: 10px;
font-weight: normal;
vertical-align: middle;
white-space: pre;
}
.editable-option {
position: relative;
display: inline-block;
}
.editable-option-select {
min-width: 250px;
}
.editable-option-input {
position: absolute;
top: 1px;
left: 1px;
width: calc(100% - 20px);
height: calc(100% - 2px) !important;
border: none !important;
}
button.dropdown-toggle {
background-color: $secondaryBackgroundColour;
}
.op-icon {
float: right;
margin-left: 10px;
margin-top: 3px;
}
.recip-icons {
position: absolute;
top: 13px;
right: 10px;
height: 16px;
}
.recip-icon {
margin-right: 10px;
vertical-align: baseline;
float: right;
}
.disable-icon {
width: 16px;
height: 16px;
margin-top: -1px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfElEQVQ4y6WTPWgTYRjHf8nlfVvuoDVIP4Yuki4WHKoUqggFRUTsUEGkVG2hmCq6OnTwIxYHB+eijZOKdLNDW1pKKyGigh8dBHUJElxyBgx3vEnukvdyDrUhRXDxGR+e/+/583xEwjDkfyIGwNVTzURm4tYAMA6MAoN/0tvAMrA48uL+l2bx4w0iYRjSuHKC6OnTZLqHk8CcaZq9bW1tSCkBqNVq+L5PpVIpAHdGfr5LN9bXiT7Z2nGgteb1/qFkLBJZ6OjowHEc8vk8pVIJgHg8TldXF52dnb2u6y5s7R/iuF5JSyAKkLl4eyAMwznLsrBtm1wu99Z13amk+BFJih8R13WXANrb27EsizAM5zIXbw+wC9Baj0spe5VSFAqFt4ZhXJ6ufXuK55E5cDKVSCTGenp6yGazKKWQUvZqrcebgCAIRqWUOI6DEOLR1K8POapVMgfPpoC7u2LLspYcx0FKSRAEo60OBg3DwPd9Jr5vPqWvj8zh83vEwL2J75vnfN/HMAy01oPNNQZBQBAEO1OvVsl0D/8lTuZfpYDd7gRBQKuD7XK5jGmarB679PIv8deVFJUKq8cuTZqmSblcRmu93QpYVkohhMCyrLE94n2/UlSrbJy5kRBCXBNCoJRCa73cClh0XbfgeR6WZZHNZunv719KvnmeYnWVVxdmJ2Ox2DMhxFHP83Bdt6C1XgR2LvHzQDvvb84npZQL8Xgc0zSJRqN7br7RaFCpVCiVStRqtZmhh9fTh754TQdMr82nPc+bsW27UCwWUUpRr9ep1+sopSgWi9i2XfA8b2Z6bT6ttabp4GMi0uz0aXbhn890+MFM85mO5MIdwP/Eb1pMUCdctYRzAAAAAElFTkSuQmCC') no-repeat;
}
.disable-icon-selected {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACFUlEQVR4XqWTP0tbURjGn9zY3mjBwsUhBQtS6XKxiNypIGZJ6SKYUYdaKWg7OrrE3pYO+Qit3dpFuuQO6lI7Z4nESQdjlJbkJh0MksSb3Jvk9H0gjZFu9YWH83LO7zn/3nNCSincJobAeP1sEDBFi6J50UyPy4l2RNuioz756Ts0tt1OB4jH2a52Ne2HGh9PwrJm2EcxZx/HyPRYMDgB2u02/N3d1c7w8BZMM1ptNJBPp3GwsUExB/s4RoYsPf0JOkFgdoH34YkJ/D48xC/HyTTOzl5ayWSIktwxqlVo0SjIkKWnP0Hg+4swjGitVMJFNpu5o+svptfXv6DZBDIZezoWS3Db3A0ZsvRcH8H354dGR9EoFHA3EvlorqycwvOAXM4G8Pav+f7YmEOGLD1gsIzl54+V+vBK/Yw9ZAv1LQW1FrdFSnKVfQTK5liPUfRI9I8ArqiPjLAF9vcHVybyzlpasgcZeq7voNXKNSsV3DMMXB4fp/8xLyzYuLri2DIZsvQM3sFOzXURiUR4zsQNcyrFleFVKpNyP2/IkKVnsArbF65bbkqplJSJZrl5x5qbs7G3h3artSyV+arr+lMyZOnpP2Wp6ZFos3R+vvUgCGDNzgKalkA4rECIr07662J2i0X4nrfJJ33jJT6Zmvpcr9XWCicn5WI+j7rrAmKgmLOPY2TI0sPgb8TBZOi/PpN1qnDr7/wH3jxgB/FKIXkAAAAASUVORK5CYII=') no-repeat;
}
.breakpoint {
float: right;
width: 14px;
height: 14px;
background-color: #eee;
border: 1px solid #aaa;
}
.breakpoint-selected {
background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEXIUkvzUVHzTEzzn5785eXrbW24BgbzWVnze3vzVVXzY2Pyion509PzbW3zXV1UMxj0l5f1srKbRTRgOxzJDg796ur74ODfIyP5zs6LLx3pNTXYGxuxdkVZNhn////sCC1eAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABWSURBVBjTnc+7EoAgDERRTOQVxMEZFAf//z8FjAUFDbfb060QU2FwxngimxnCea3bjegSgz+0tguAfBgIy64QGfZQdg91dgAtqUZgnfz6IacYVWvu2AvR4wNAv0nxrAAAAABJRU5ErkJggg==') no-repeat -2px -2px;
}
.break {
color: $breakpointFontColour !important;
background-color: $breakpointBgColour !important;
border-color: $breakpointBorderColour !important;
}
.selected-op {
color: $selectedOperationFontColor !important;
background-color: $selectedOperationBgColour !important;
border-color: $selectedOperationBorderColour !important;
}
.flow-control-op {
color: $fcOperationFontColour !important;
background-color: $fcOperationBgColour !important;
border-color: $fcOperationBorderColour !important;
}
.flow-control-op.break {
color: $fcBreakpointOperationFontColour !important;
background-color: $fcBreakpointOperationBgColour !important;
border-color: $fcBreakpointOperationBorderColour !important;
}
.disabled {
color: $disabledFontColour !important;
background-color: $disabledBgColour !important;
border-color: $disabledBorderColour !important;
}

28
src/web/stylesheets/components/_pane.scss Normal file
View File

@ -0,0 +1,28 @@
/**
* Workspace pane styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
$titleHeight: 43px;
.title {
padding: 10px;
height: $titleHeight;
border-bottom: 1px solid $primaryBorderColour;
font-weight: $titleWeight;
color: $titleColour;
background-color: $secondaryBackgroundColour;
}
.list-area {
position: absolute;
top: $titleHeight;
bottom: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}

28
src/web/stylesheets/layout/_banner.scss Normal file
View File

@ -0,0 +1,28 @@
/**
* Banner area styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
#banner {
position: absolute;
height: 30px;
width: 100%;
text-align: center;
line-height: 30px;
border-bottom: 1px solid $primaryBorderColour;
color: $bannerFontColour;
background-color: $bannerBgColour;
}
.banner-right {
float: right;
margin-right: 10px;
}
#banner img {
margin-bottom: 2px;
margin-left: 8px;
}

63
src/web/stylesheets/layout/_controls.scss Normal file
View File

@ -0,0 +1,63 @@
/**
* Controls area styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
$controlsHeight: 120px;
$controlsDivision: 65%;
#controls {
position: absolute;
width: 100%;
height: $controlsHeight;
bottom: 0;
padding: 10px;
border-top: 1px solid $primaryBorderColour;
background-color: $secondaryBackgroundColour;
}
#operational-controls {
width: $controlsDivision;
float: left;
text-align: center;
}
#bake-group {
display: table;
width: 100%;
}
#bake {
display: table-cell;
width: 100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#auto-bake-label {
display: table-cell;
padding: 1px;
line-height: 1.35;
width: 60px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 1px solid #5cb85c;
}
#auto-bake-label:hover {
border-left-color: #398439;
}
#auto-bake-label div {
font-size: 10px;
padding: 2px;
}
#extra-controls {
float: right;
width: 100% - $controlsDivision;
padding-left: 10px;
}

411
src/web/stylesheets/structure/layout.scss → src/web/stylesheets/layout/_io.scss Executable file → Normal file
View File

File diff suppressed because one or more lines are too long

80
src/web/stylesheets/layout/_modals.scss Normal file
View File

@ -0,0 +1,80 @@
/**
* Modal layout styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
.option-item .bootstrap-switch {
margin: 15px 10px;
}
.option-item button {
margin: 10px;
}
.option-item input[type=number] {
margin: 15px 10px;
width: 80px;
height: 28px;
padding: 3px 10px;
vertical-align: middle;
font-size: $argInputFontSize - 1px;
line-height: $argInputLineHeight;
color: $argFontColour;
background-color: $argBackground;
border: 1px solid $primaryBorderColour;
}
.option-item select {
margin: 10px;
display: inline-block;
}
#edit-favourites-list {
margin: 10px;
border: 1px solid $opListOperationBorderColour;
}
#edit-favourites-list .operation {
border-left: none;
border-right: none;
}
#edit-favourites-list .operation:last-child {
border-bottom: none;
}
.about-img-left {
float: left;
margin: 10px 20px 20px 0;
}
.about-img-right {
float: right;
margin: 10px 0 20px 20px;
}
.save-link-options {
float: right;
}
.save-link-options input{
margin-left: 10px;
}
#save-footer {
border-top: none;
margin-top: 0;
border-bottom: 1px solid #e5e5e5;
}
#support-modal textarea {
font-family: $primaryFontFamily;
}
#save-text,
#load-text {
font-family: $fixedWidthFontFamily;
}

65
src/web/stylesheets/layout/_operations.scss Normal file
View File

@ -0,0 +1,65 @@
/**
* Operation area styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
#op-list {
@extend .list-area;
}
.category-title {
display: block;
padding: 10px;
background-color: $secondaryBackgroundColour;
border-bottom: 1px solid $secondaryBorderColour;
font-weight: $titleWeight;
}
.category-title[href='#catFavourites'] {
border-bottom-color: $primaryBorderColour;
}
.category-title[aria-expanded=true] {
border-bottom-color: $primaryBorderColour;
}
.category-title.collapsed {
border-bottom-color: $secondaryBorderColour;
}
.category-title:hover {
color: $opListOperationFontColour;
}
.category {
margin: 0 !important;
border-radius: 0 !important;
border: none;
}
.op-list .operation {
color: $opListOperationFontColour;
background-color: $opListOperationBgColour;
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;
}

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

@ -0,0 +1,19 @@
/**
* 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;
}

285
src/web/stylesheets/themes/classic.scss → src/web/stylesheets/layout/_structure.scss Executable file → Normal file
View File

@ -1,16 +1,51 @@
#banner {
border-bottom: 1px solid #ddd;
/**
* Overall page structure styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
#content-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.title {
border-bottom: 1px solid #ddd;
font-weight: bold;
color: #424242;
background-color: #fafafa;
#workspace-wrapper {
position: absolute;
top: 30px;
bottom: 0;
width: 100%;
}
div#operations,
div#recipe {
width: 50%;
height: 100%;
}
div#input,
div#output {
width: 100%;
height: 50%;
}
.split {
@include box-sizing(border-box);
overflow: auto;
position: relative;
}
.split.split-horizontal, .gutter.gutter-horizontal {
height: 100%;
float: left;
}
.gutter {
background-color: #eee;
background-color: $secondaryBorderColour;
background-repeat: no-repeat;
background-position: 50%;
}
@ -23,236 +58,4 @@
.gutter.gutter-vertical {
background-image: url('data:image/png;base64,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');
cursor: ns-resize;
}
.operation {
border: 1px solid #999;
border-top-width: 0;
}
.op-list .operation { /*blue*/
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
#rec-list .operation { /*green*/
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
#controls {
border-top: 1px solid #ddd;
background-color: #fafafa;
}
.textarea-wrapper textarea,
.textarea-wrapper div {
font-family: Consolas, monospace;
font-size: inherit;
}
.io-info {
font-family: Consolas, monospace;
font-weight: normal;
font-size: 8pt;
}
.arg-title {
font-weight: bold;
}
.arg-input {
height: 34px;
font-size: 15px;
line-height: 1.428571429;
color: #424242;
background-color: #fff;
border: 1px solid #ddd;
font-family: Consolas, monospace;
}
select {
padding: 6px 8px;
height: 34px;
border: 1px solid #ddd;
background-color: #fff;
color: #424242;
}
.arg[disabled] {
background-color: #eee;
}
textarea.arg {
color: #424242;
font-family: Consolas, monospace;
}
.break {
color: #b94a48 !important;
background-color: #f2dede !important;
border-color: #eed3d7 !important;
}
.category-title {
background-color: #fafafa;
border-bottom: 1px solid #eee;
font-weight: bold;
}
.category-title[href='#catFavourites'] {
border-bottom-color: #ddd;
}
.category-title[aria-expanded=true] {
border-bottom-color: #ddd;
}
.category-title.collapsed {
border-bottom-color: #eee;
}
.category-title:hover {
color: #3a87ad;
}
#search {
border-bottom: 1px solid #e3e3e3;
}
.dropping-file {
border: 5px dashed #3a87ad !important;
}
.selected-op {
color: #c09853 !important;
background-color: #fcf8e3 !important;
border-color: #fbeed5 !important;
}
.option-item input[type=number] {
font-size: 14px;
line-height: 1.428571429;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
}
.favourites-hover {
color: #468847;
background-color: #dff0d8;
border: 2px dashed #468847 !important;
padding: 8px 8px 9px 8px;
}
#edit-favourites-list {
border: 1px solid #bce8f1;
}
#edit-favourites-list .operation {
border-left: none;
border-right: none;
}
#edit-favourites-list .operation:last-child {
border-bottom: none;
}
.subtext {
font-style: italic;
font-size: 13px;
color: #999;
}
#save-footer {
border-bottom: 1px solid #e5e5e5;
}
.flow-control-op {
color: #396f3a !important;
background-color: #c7e4ba !important;
border-color: #b3dba2 !important;
}
.flow-control-op.break {
color: #94312f !important;
background-color: #eabfbf !important;
border-color: #e2aeb5 !important;
}
#support-modal textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#save-text,
#load-text {
font-family: Consolas, monospace;
}
button.dropdown-toggle {
background-color: #f4f4f4;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: #fafafa;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
}
::-webkit-scrollbar-corner {
background-color: #fafafa;
}
.disabled {
color: #999 !important;
background-color: #dfdfdf !important;
border-color: #cdcdcd !important;
}
.grey {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.dark-blue {
color: #fff;
background-color: #428bca;
border-color: #428bca;
}
.red {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.amber {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}
.green {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.blue {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
}

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

@ -10,12 +10,32 @@
@import "~google-code-prettify/src/prettify.css";
// Frameworks
@import "vendors/bootstrap.scss";
@import "vendors/bootstrap";
@import "~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
@import "~bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
// CyberChef styles
@import "structure/overrides.scss";
@import "structure/layout.scss";
@import "structure/utils.scss";
@import "themes/classic.scss";
// Theme
@import "themes/_classic";
// Utilities
@import "utils/_mixins";
@import "utils/_overrides";
@import "utils/_general";
// 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";

37
src/web/stylesheets/structure/utils.scss
View File

@ -1,37 +0,0 @@
.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 {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.konami {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.hl1, .hlyellow { background-color: #fff000; }
.hl2, .hlblue { background-color: #95dfff; }
.hl3, .hlred { background-color: #ffb6b6; } /* Half-Life 3 confirmed :O */
.hl4, .hlorange { background-color: #fcf8e3; }
.hl5, .hlgreen { background-color: #8de768; }

90
src/web/stylesheets/themes/_classic.scss Executable file
View File

@ -0,0 +1,90 @@
/**
* 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;
// 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;
$argDisabledBackground: #eee;
// Misc.
$dropFileBorderColour: #3a87ad;
$bannerFontColour: #468847;
$bannerBgColour: #dff0d8;
$scrollbarTrack: $secondaryBackgroundColour;
$scrollbarThumb: #ccc;
$scrollbarHover: #bbb;
// Highlighter colours
$hl1: #fff000;
$hl2: #95dfff;
$hl3: #ffb6b6;
$hl4: #fcf8e3;
$hl5: #8de768;

73
src/web/stylesheets/utils/_general.scss 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: $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 transform(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; }

29
src/web/stylesheets/utils/_mixins.scss Normal file
View File

@ -0,0 +1,29 @@
/**
* 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 transform($value) {
-ms-transform: rotate($value);
-webkit-transform: rotate($value);
-moz-transform: rotate($value);
transform: rotate($value);
}

8
src/web/stylesheets/structure/overrides.scss → src/web/stylesheets/utils/_overrides.scss
View File

@ -1,3 +1,11 @@
/**
* Overrides for vendor styles
*
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2017
* @license Apache-2.0
*/
/* Bootstrap */
button,