mirror of
https://github.com/gchq/CyberChef.git
synced 2025-04-27 18:26:14 -04:00
Moved from Sass to CSS with custom properties, allowing for dynamic theme changes.
This commit is contained in:
n1474335
parent
e3f41fea9c
commit
d71ac2e894
27 changed files with 527 additions and 603 deletions
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -20,11 +20,11 @@
|
|||
height: 28px;
|
||||
padding: 3px 10px;
|
||||
vertical-align: middle;
|
||||
font-size: $argInputFontSize - 1px;
|
||||
line-height: $argInputLineHeight;
|
||||
color: $argFontColour;
|
||||
background-color: $argBackground;
|
||||
border: 1px solid $primaryBorderColour;
|
||||
font-size: calc(var(--arg-input-font-size) - 1px);
|
||||
line-height: var(--arg-input-line-height);
|
||||
color: var(--arg-font-colour);
|
||||
background-color: var(--arg-background);
|
||||
border: 1px solid var(--primary-border-colour);
|
||||
}
|
||||
|
||||
.option-item select {
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
#edit-favourites-list {
|
||||
margin: 10px;
|
||||
border: 1px solid $opListOperationBorderColour;
|
||||
border: 1px solid var(--op-list-operation-border-colour);
|
||||
}
|
||||
|
||||
#edit-favourites-list .operation {
|
||||
|
|
@ -67,14 +67,14 @@
|
|||
#save-footer {
|
||||
border-top: none;
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid $primaryBorderColour;
|
||||
border-bottom: 1px solid var(--primary-border-colour);
|
||||
}
|
||||
|
||||
#support-modal textarea {
|
||||
font-family: $primaryFontFamily;
|
||||
font-family: var(--primary-font-family);
|
||||
}
|
||||
|
||||
#save-text,
|
||||
#load-text {
|
||||
font-family: $fixedWidthFontFamily;
|
||||
font-family: var(--fixed-width-font-family);
|
||||
}
|
||||
31
src/web/stylesheets/layout/_operations.css
Normal file
31
src/web/stylesheets/layout/_operations.css
Normal 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;
|
||||
}
|
||||
|
|
@ -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
18
src/web/stylesheets/layout/_recipe.css
Normal 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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue