p5.js-web-editor/client/styles/abstracts/_variables.scss
Liang Tang 617f00653c Improve current console (#656)
* init v2

* make replay work

* fix a failing scenary of react-frame

* fix some bugs

* delete/comment some files

* remove

* fix some bugs && remove more comments

* remove unnecessary lines

* minor tweak

* fix some bugs

* try to hook iframe using webpack

* update

* changes according to cassie

* minor tweak

* fix lint

* extract sass

* add icons

* update webpack config

* update webpack configuration

* update

* tweak

* fix a small bug
2018-07-30 12:20:57 -04:00

174 lines
No EOL
5.7 KiB
SCSS

$base-font-size: 12;
//colors
$p5js-pink: #ed225d;
$white: #fff;
$black: #000;
$yellow: #F5DC23;
$orange: #ffa500;
$red: #ff0000;
$lightsteelblue: #B0C4DE;
$dodgerblue: #1E90FF;
$primary-text-color: #333;
$icon-color: #8b8b8b;
$icon-hover-color: #333;
$themes: (
light: (
logo-color: $p5js-pink,
primary-text-color: #333,
modal-button-color: #333,
heading-text-color: #333,
secondary-text-color: #a8a8a8,
inactive-text-color: #b5b5b5,
background-color: #fbfbfb,
preview-placeholder-color: #dcdcdc,
button-background-color: #f4f4f4,
button-color: $black,
button-border-color: #979797,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #f4f4f4,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #f4f4f4,
modal-button-background-color: #e6e6e6,
modal-border-color: rgba(17, 17, 17, 0.3),
modal-boder-selected-color: #B9D0E1,
icon-color: $icon-color,
icon-hover-color: $icon-hover-color,
icon-toast-hover-color: $white,
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #eee,
console-color: $white,
console-header-background-color: #d6d6d6,
console-header-color: #b1b1b1,
console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue,
console-error-background-color: $red,
ide-border-color: #f4f4f4,
editor-gutter-color: #f4f4f4,
file-selected-color: #f4f4f4,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #4a4a4a,
search-background-color: #ebebeb,
dropdown-color: #414141,
keyboard-shortcut-color: #757575,
nav-hover-color: $p5js-pink,
codefold-icon-open: url(../images/down-arrow.svg),
codefold-icon-closed: url(../images/right-arrow.svg)
),
dark: (
logo-color: $p5js-pink,
primary-text-color: $white,
modal-button-color: $white,
heading-text-color: $white,
secondary-text-color: #DADADA,
inactive-text-color: #b5b5b5,
background-color: #333,
preview-placeholder-color: #dcdcdc,
button-background-color: $white,
button-color: $black,
button-border-color: #979797,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #424242,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #444,
modal-button-background-color: #5f5f5f,
modal-border-color: #949494,
icon-color: #a9a9a9,
icon-hover-color: $white,
icon-toast-hover-color: $white,
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f,
console-color: $black,
console-header-background-color: #3f3f3f,
console-header-color: #b5b5b5,
console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue,
console-error-background-color: $red,
ide-border-color: #949494,
editor-gutter-color: #363636,
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4,
search-background-color: #ebebeb,
dropdown-color: #dadada,
keyboard-shortcut-color: #B5B5B5,
nav-hover-color: $p5js-pink,
codefold-icon-open: url(../images/down-arrow-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg)
),
contrast: (
logo-color: $yellow,
primary-text-color: $yellow,
modal-button-color: #333,
heading-text-color: #e1e1e1,
secondary-text-color: #e1e1e1,
inactive-text-color: #c1c1c1,
background-color: #333,
button-background-color: $white,
button-color: $black,
button-border-color: #979797,
toolbar-button-color: #333333,
toolbar-button-background-color: #C1C1C1,
button-background-hover-color: $yellow,
button-background-active-color: #f10046,
button-hover-color: #333333,
button-active-color: #333333,
modal-background-color: #444,
modal-button-background-color: #C1C1C1,
modal-border-color: #949494,
icon-color: #a9a9a9,
icon-hover-color: $yellow,
icon-toast-hover-color: $yellow,
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f,
console-color: $black,
console-header-background-color: #3f3f3f,
console-header-color: #b5b5b5,
console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue,
console-error-background-color: $red,
ide-border-color: #949494,
editor-gutter-color: #454545,
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4,
search-background-color: $white,
dropdown-color: #e1e1e1,
keyboard-shortcut-color: #e1e1e1,
nav-hover-color: $yellow,
codefold-icon-open: url(../images/down-arrow-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg)
)
);
$console-warn-color: #ffbe05;
$console-error-color: #ff5f52;
$toast-background-color: #4A4A4A;
$toast-text-color: $white;
$form-title-color: rgba(51, 51, 51, 0.87);
$secondary-form-title-color: #b5b5b5;
$form-button-background-color: $white;
$form-button-color: #f10046;
$form-button-background-hover-color: $p5js-pink;
$form-button-background-active-color: #f10046;
$form-button-hover-color: $white;
$form-button-active-color: $white;
$form-navigation-options-color: #999999;
$about-play-background-color: rgba(255, 255, 255, 0.7);
$about-button-border-color: rgba(151, 151, 151, 0.7);