mirror of
https://github.com/gchq/CyberChef.git
synced 2025-06-19 12:47: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
73
src/web/stylesheets/utils/_general.css
Executable file
73
src/web/stylesheets/utils/_general.css
Executable 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); }
|
||||
|
|
@ -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; }
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue