mirror of
https://github.com/gchq/CyberChef.git
synced 2024-11-02 14:11:02 +01:00
Updated buttons, fonts and collapse
This commit is contained in:
n1474335
parent
5a7bb092c7
commit
bcc8804495
@ -105,9 +105,9 @@ ControlsWaiter.prototype.autoBakeChange = function() {
|
||||
|
||||
if (autoBakeCheckbox.checked) {
|
||||
autoBakeLabel.classList.add("btn-success");
|
||||
autoBakeLabel.classList.remove("btn-default");
|
||||
autoBakeLabel.classList.remove("btn-secondary");
|
||||
} else {
|
||||
autoBakeLabel.classList.add("btn-default");
|
||||
autoBakeLabel.classList.add("btn-secondary");
|
||||
autoBakeLabel.classList.remove("btn-success");
|
||||
}
|
||||
};
|
||||
|
||||
@ -33,13 +33,12 @@ HTMLCategory.prototype.addOperation = function(operation) {
|
||||
*/
|
||||
HTMLCategory.prototype.toHtml = function() {
|
||||
const catName = "cat" + this.name.replace(/[\s/-:_]/g, "");
|
||||
let html = "<div class='panel category'>\
|
||||
<a class='category-title' data-toggle='collapse'\
|
||||
data-parent='#categories' href='#" + catName + "'>\
|
||||
" + this.name + "\
|
||||
</a>\
|
||||
<div id='" + catName + "' class='panel-collapse collapse\
|
||||
" + (this.selected ? " in" : "") + "'><ul class='op-list'>";
|
||||
let html = `<div class="panel category">
|
||||
<a class="category-title" data-toggle="collapse" data-parent="#categories" href="#${catName}">
|
||||
${this.name}
|
||||
</a>
|
||||
<div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}">
|
||||
<ul class="op-list">`;
|
||||
|
||||
for (let i = 0; i < this.opList.length; i++) {
|
||||
html += this.opList[i].toStubHtml();
|
||||
|
||||
@ -62,7 +62,7 @@ HTMLIngredient.prototype.toHtml = function() {
|
||||
break;
|
||||
case "toggleString":
|
||||
html += "<div class='input-group'><div class='input-group-btn'>\
|
||||
<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'\
|
||||
<button type='button' class='btn btn-secondary dropdown-toggle' data-toggle='dropdown'\
|
||||
aria-haspopup='true' aria-expanded='false'" +
|
||||
(this.disabled ? " disabled='disabled'" : "") + ">" + this.toggleValues[0] +
|
||||
" <span class='caret'></span></button><ul class='dropdown-menu'>";
|
||||
|
||||
@ -78,7 +78,7 @@ OperationsWaiter.prototype.searchOperations = function(e) {
|
||||
searchResultsEl.removeChild(searchResultsEl.firstChild);
|
||||
}
|
||||
|
||||
$("#categories .in").collapse("hide");
|
||||
$("#categories .show").collapse("hide");
|
||||
if (str) {
|
||||
const matchedOps = this.filterOperations(str, true);
|
||||
const matchedOpsHtml = matchedOps
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
<div id="preloader-msg" class="loading-msg"></div>
|
||||
</div>
|
||||
<!-- End preloader overlay -->
|
||||
<span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
|
||||
<span id="edit-favourites" class="btn btn-secondary btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
|
||||
<div id="alert" class="alert alert-danger">
|
||||
<button type="button" class="close" id="alert-close">×</button>
|
||||
<span id="alert-content"></span>
|
||||
@ -159,15 +159,15 @@
|
||||
</div>
|
||||
|
||||
<div class="btn-group" style="padding-top: 10px;">
|
||||
<button type="button" class="btn btn-default" id="step"><img aria-hidden="true" src="<%- require('../static/images/step-16x16.png') %>" alt="Footstep Icon"/> Step through</button>
|
||||
<button type="button" class="btn btn-default" id="clr-breaks"><img aria-hidden="true" src="<%- require('../static/images/erase-16x16.png') %>" alt="Eraser Icon"/> Clear breakpoints</button>
|
||||
<button type="button" class="btn btn-secondary" id="step"><img aria-hidden="true" src="<%- require('../static/images/step-16x16.png') %>" alt="Footstep Icon"/> Step through</button>
|
||||
<button type="button" class="btn btn-secondary" id="clr-breaks"><img aria-hidden="true" src="<%- require('../static/images/erase-16x16.png') %>" alt="Eraser Icon"/> Clear breakpoints</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group-vertical" id="extra-controls">
|
||||
<button type="button" class="btn btn-default" id="save"><img aria-hidden="true" src="<%- require('../static/images/save-16x16.png') %>" alt="Save Icon"/> Save recipe</button>
|
||||
<button type="button" class="btn btn-default" id="load"><img aria-hidden="true" src="<%- require('../static/images/open_yellow-16x16.png') %>" alt="Open Icon"/> Load recipe</button>
|
||||
<button type="button" class="btn btn-default" id="clr-recipe"><img aria-hidden="true" src="<%- require('../static/images/clean-16x16.png') %>" alt="Broom Icon"/> Clear recipe</button>
|
||||
<button type="button" class="btn btn-secondary" id="save"><img aria-hidden="true" src="<%- require('../static/images/save-16x16.png') %>" alt="Save Icon"/> Save recipe</button>
|
||||
<button type="button" class="btn btn-secondary" id="load"><img aria-hidden="true" src="<%- require('../static/images/open_yellow-16x16.png') %>" alt="Open Icon"/> Load recipe</button>
|
||||
<button type="button" class="btn btn-secondary" id="clr-recipe"><img aria-hidden="true" src="<%- require('../static/images/clean-16x16.png') %>" alt="Broom Icon"/> Clear recipe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -177,8 +177,8 @@
|
||||
<div class="title no-select">
|
||||
<label for="input-text">Input</label>
|
||||
<div class="btn-group io-btn-group">
|
||||
<button type="button" class="btn btn-default btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
|
||||
<button type="button" class="btn btn-default btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
|
||||
</div>
|
||||
<div class="io-info" id="input-info"></div>
|
||||
<div class="io-info" id="input-selection-info"></div>
|
||||
@ -208,11 +208,11 @@
|
||||
<div class="title no-select">
|
||||
<label for="output-text">Output</label>
|
||||
<div class="btn-group io-btn-group">
|
||||
<button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
|
||||
<button type="button" class="btn btn-default btn-sm" id="copy-output" title="Copy output"><img aria-hidden="true" src="<%- require('../static/images/copy-16x16.png') %>" alt="Copy Icon"/> Copy raw output</button>
|
||||
<button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
|
||||
<button type="button" class="btn btn-default btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img aria-hidden="true" src="<%- require('../static/images/undo-16x16.png') %>" alt="Undo Icon"/> Undo</button>
|
||||
<button type="button" class="btn btn-default btn-sm" id="maximise-output" title="Maximise"><img aria-hidden="true" src="<%- require('../static/images/maximise-16x16.png') %>" alt="Maximise Icon"/> Max</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="copy-output" title="Copy output"><img aria-hidden="true" src="<%- require('../static/images/copy-16x16.png') %>" alt="Copy Icon"/> Copy raw output</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img aria-hidden="true" src="<%- require('../static/images/undo-16x16.png') %>" alt="Undo Icon"/> Undo</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="maximise-output" title="Maximise"><img aria-hidden="true" src="<%- require('../static/images/maximise-16x16.png') %>" alt="Maximise Icon"/> Max</button>
|
||||
</div>
|
||||
<div class="io-info" id="output-info"></div>
|
||||
<div class="io-info" id="output-selection-info"></div>
|
||||
@ -233,7 +233,7 @@
|
||||
<button id="output-file-download" type="button" class="btn btn-primary">Download</button>
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button id="output-file-slice" type="button" class="btn btn-default" title="View slice">🔍</button>
|
||||
<button id="output-file-slice" type="button" class="btn btn-secondary" title="View slice">🔍</button>
|
||||
</span>
|
||||
<input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="1024" min="0">
|
||||
<div class="input-group-addon">to</div>
|
||||
@ -287,7 +287,7 @@
|
||||
</div>
|
||||
<div class="modal-footer" id="save-footer">
|
||||
<button type="button" class="btn btn-primary" id="save-button" data-dismiss="modal">Save</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Done</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group" id="save-link-group">
|
||||
@ -324,7 +324,7 @@
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" id="load-button" data-dismiss="modal">Load</button>
|
||||
<button type="button" class="btn btn-danger" id="load-delete-button">Delete</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -392,8 +392,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" id="reset-options">Reset options to default</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -418,7 +418,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
|
||||
<button type="button" class="btn btn-success" data-dismiss="modal" id="save-favourites">Save</button>
|
||||
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
@ -549,7 +549,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
<a href="https://github.com/gchq/CyberChef">
|
||||
<img aria-hidden="true" style="position: absolute; top: 0; right: 0; border: 0;" src="<%- require('../static/images/fork_me.png') %>" alt="Fork me on GitHub">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
--controls-height: 120px;
|
||||
--controls-height: 130px;
|
||||
--controls-division: 65%;
|
||||
}
|
||||
|
||||
|
||||
@ -8,12 +8,14 @@
|
||||
|
||||
:root,
|
||||
:root.classic {
|
||||
--primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--primary-font-colour: #333;
|
||||
--primary-font-size: 14px;
|
||||
--primary-line-height: 20px;
|
||||
|
||||
--fixed-width-font-family: "Consolas", monospace;
|
||||
--fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace;
|
||||
--fixed-width-font-colour: inherit;
|
||||
--fixed-width-font-size: inherit;
|
||||
|
||||
|
||||
@ -13,30 +13,30 @@ a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
.btn-secondary {
|
||||
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,
|
||||
.open>.dropdown-toggle.btn-default {
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:active,
|
||||
.btn-secondary:hover:active,
|
||||
.open>.dropdown-toggle.btn-secondary {
|
||||
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,
|
||||
.open>.dropdown-toggle.btn-default:hover,
|
||||
.open>.dropdown-toggle.btn-default:focus {
|
||||
.btn-secondary:focus,
|
||||
.open>.dropdown-toggle.btn-secondary:hover,
|
||||
.open>.dropdown-toggle.btn-secondary:focus {
|
||||
color: var(--btn-default-font-colour);
|
||||
background-color: var(--btn-default-bg-colour);
|
||||
border-color: var(--btn-default-hover-border-colour);
|
||||
}
|
||||
|
||||
.btn-default[disabled]:hover {
|
||||
.btn-secondary[disabled]:hover {
|
||||
background-color: var(--primary-background-colour);
|
||||
border-color: var(--primary-border-colour);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user