Moved from Sass to CSS with custom properties, allowing for dynamic theme changes.
This commit is contained in:
n1474335
parent
e3f41fea9c
commit
d71ac2e894
@ -20,7 +20,7 @@
|
||||
-->
|
||||
<!-- htmlmin:ignore -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="classic">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CyberChef</title>
|
||||
@ -66,13 +66,13 @@
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<div id="recipe" class="split split-horizontal no-select">
|
||||
<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="operational-controls">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
// Styles
|
||||
import "./stylesheets/main.scss";
|
||||
import "./stylesheets/main.js";
|
||||
|
||||
// Libs
|
||||
import "babel-polyfill";
|
||||
|
||||
@ -15,25 +15,25 @@
|
||||
.category-title {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
background-color: $secondaryBackgroundColour;
|
||||
border-bottom: 1px solid $secondaryBorderColour;
|
||||
font-weight: $titleWeight;
|
||||
background-color: var(--secondary-background-colour);
|
||||
border-bottom: 1px solid var(--secondary-border-colour);
|
||||
font-weight: var(--title-weight);
|
||||
}
|
||||
|
||||
.category-title[href='#catFavourites'] {
|
||||
border-bottom-color: $primaryBorderColour;
|
||||
border-bottom-color: var(--primary-border-colour);
|
||||
}
|
||||
|
||||
.category-title[aria-expanded=true] {
|
||||
border-bottom-color: $primaryBorderColour;
|
||||
border-bottom-color: var(--primary-border-colour);
|
||||
}
|
||||
|
||||
.category-title.collapsed {
|
||||
border-bottom-color: $secondaryBorderColour;
|
||||
border-bottom-color: var(--secondary-border-colour);
|
||||
}
|
||||
|
||||
.category-title:hover {
|
||||
color: $opListOperationFontColour;
|
||||
color: var(--op-list-operation-font-colour);
|
||||
}
|
||||
|
||||
.category {
|
||||
@ -44,7 +44,7 @@
|
||||
}
|
||||
|
||||
.arg-title {
|
||||
font-weight: $argTitleFontWeight;
|
||||
font-weight: var(--arg-title-font-weight);
|
||||
}
|
||||
|
||||
.arg-input {
|
||||
@ -52,13 +52,13 @@
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
vertical-align: middle;
|
||||
height: $argInputHeight;
|
||||
font-size: $argInputFontSize;
|
||||
line-height: $argInputLineHeight;
|
||||
color: $argFontColour;
|
||||
background-color: $argBackground;
|
||||
border: 1px solid $argBorderColour;
|
||||
font-family: $fixedWidthFontFamily;
|
||||
height: var(--arg-input-height);
|
||||
font-size: var(--arg-input-font-size);
|
||||
line-height: var(--arg-input-line-height);
|
||||
color: var(--arg-font-colour);
|
||||
background-color: var(--arg-background);
|
||||
border: 1px solid var(--arg-border-colour);
|
||||
font-family: var(--fixed-width-font-family);
|
||||
}
|
||||
|
||||
.short-string {
|
||||
@ -69,15 +69,15 @@ select {
|
||||
display: block;
|
||||
padding: 6px 8px;
|
||||
height: 34px;
|
||||
border: 1px solid $argBorderColour;
|
||||
background-color: $argBackground;
|
||||
color: $argFontColour;
|
||||
border: 1px solid var(--arg-border-colour);
|
||||
background-color: var(--arg-background);
|
||||
color: var(--arg-font-colour);
|
||||
}
|
||||
|
||||
.arg[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
background-color: $argDisabledBackground;
|
||||
background-color: var(--arg-disabled-background);
|
||||
}
|
||||
|
||||
textarea.arg {
|
||||
@ -85,11 +85,11 @@ textarea.arg {
|
||||
min-height: 50px;
|
||||
height: 70px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid $argBorderColour;
|
||||
border: 1px solid var(--arg-border-colour);
|
||||
resize: vertical;
|
||||
color: $argFontColour;
|
||||
background-color: $argBackground;
|
||||
font-family: $fixedWidthFontFamily;
|
||||
color: var(--arg-font-colour);
|
||||
background-color: var(--arg-background);
|
||||
font-family: var(--fixed-width-font-family);
|
||||
}
|
||||
|
||||
.arg-label {
|
||||
@ -120,7 +120,7 @@ textarea.arg {
|
||||
}
|
||||
|
||||
button.dropdown-toggle {
|
||||
background-color: $secondaryBackgroundColour;
|
||||
background-color: var(--secondary-background-colour);
|
||||
}
|
||||
|
||||
.op-icon {
|
||||
@ -166,31 +166,31 @@ button.dropdown-toggle {
|
||||
}
|
||||
|
||||
.break {
|
||||
color: $breakpointFontColour !important;
|
||||
background-color: $breakpointBgColour !important;
|
||||
border-color: $breakpointBorderColour !important;
|
||||
color: var(--breakpoint-font-colour) !important;
|
||||
background-color: var(--breakpoint-bg-colour) !important;
|
||||
border-color: var(--breakpoint-border-colour) !important;
|
||||
}
|
||||
|
||||
.selected-op {
|
||||
color: $selectedOperationFontColor !important;
|
||||
background-color: $selectedOperationBgColour !important;
|
||||
border-color: $selectedOperationBorderColour !important;
|
||||
color: var(--selected-operation-font-color) !important;
|
||||
background-color: var(--selected-operation-bg-colour) !important;
|
||||
border-color: var(--selected-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.flow-control-op {
|
||||
color: $fcOperationFontColour !important;
|
||||
background-color: $fcOperationBgColour !important;
|
||||
border-color: $fcOperationBorderColour !important;
|
||||
color: var(--fc-operation-font-colour) !important;
|
||||
background-color: var(--fc-operation-bg-colour) !important;
|
||||
border-color: var(--fc-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.flow-control-op.break {
|
||||
color: $fcBreakpointOperationFontColour !important;
|
||||
background-color: $fcBreakpointOperationBgColour !important;
|
||||
border-color: $fcBreakpointOperationBorderColour !important;
|
||||
color: var(--fc-breakpoint-operation-font-colour) !important;
|
||||
background-color: var(--fc-breakpoint-operation-bg-colour) !important;
|
||||
border-color: var(--fc-breakpoint-operation-border-colour) !important;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: $disabledFontColour !important;
|
||||
background-color: $disabledBgColour !important;
|
||||
border-color: $disabledBorderColour !important;
|
||||
color: var(--disabled-font-colour) !important;
|
||||
background-color: var(--disabled-bg-colour) !important;
|
||||
border-color: var(--disabled-border-colour) !important;
|
||||
}
|
||||
@ -6,20 +6,22 @@
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
$titleHeight: 43px;
|
||||
:root {
|
||||
--title-height: 43px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
height: $titleHeight;
|
||||
border-bottom: 1px solid $primaryBorderColour;
|
||||
font-weight: $titleWeight;
|
||||
color: $titleColour;
|
||||
background-color: $secondaryBackgroundColour;
|
||||
height: var(--title-height);
|
||||
border-bottom: 1px solid var(--primary-border-colour);
|
||||
font-weight: var(--title-weight);
|
||||
color: var(--title-colour);
|
||||
background-color: var(--secondary-background-colour);
|
||||
}
|
||||
|
||||
.list-area {
|
||||
position: absolute;
|
||||
top: $titleHeight;
|
||||
top: var(--title-height);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
@ -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%;
|
||||
}
|
||||
44
src/web/stylesheets/main.js
Normal file
44
src/web/stylesheets/main.js
Normal 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";
|
||||
@ -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";
|
||||
@ -13,7 +13,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
background-color: $secondaryBorderColour;
|
||||
background-color: var(--secondary-border-colour);
|
||||
}
|
||||
|
||||
#preloader {
|
||||
@ -30,10 +30,11 @@
|
||||
border-radius: 50%;
|
||||
z-index: 1500;
|
||||
|
||||
@include animation(spin 2s linear infinite);
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
.loader-arm {
|
||||
#preloader:before,
|
||||
#preloader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
@ -45,31 +46,29 @@
|
||||
}
|
||||
|
||||
#preloader:before {
|
||||
@extend .loader-arm;
|
||||
border-top-color: #e74c3c;
|
||||
@include animation(spin 3s linear infinite);
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
#preloader:after {
|
||||
@extend .loader-arm;
|
||||
border-top-color: #f9c922;
|
||||
@include animation(spin 1.5s linear infinite);
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
/* Loaded */
|
||||
.loaded #preloader {
|
||||
opacity: 0;
|
||||
@include transition(all 0.3s ease-out);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper {
|
||||
opacity: 0;
|
||||
@include transition(all 0.5s 0.3s ease-out);
|
||||
transition: all 0.5s 0.3s ease-out;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -117,37 +116,20 @@
|
||||
}
|
||||
|
||||
|
||||
// Animations
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
@include rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
@include rotate(360deg);
|
||||
}
|
||||
}
|
||||
/* Animations */
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
@include rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
@include rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes bump {
|
||||
from {
|
||||
opacity: 0;
|
||||
@include translate3d(0, 200px, 0);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bump {
|
||||
from {
|
||||
opacity: 0;
|
||||
@include translate3d(0, 200px, 0);
|
||||
transform: translate3d(0, 200px, 0);
|
||||
}
|
||||
}
|
||||
116
src/web/stylesheets/themes/_classic.css
Executable file
116
src/web/stylesheets/themes/_classic.css
Executable 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;
|
||||
}
|
||||
@ -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
126
src/web/stylesheets/themes/_dark.css
Normal 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 */
|
||||
}
|
||||
@ -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
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…
Reference in New Issue
Block a user