r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Make minor adjustments in all themes

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-27 16:48:55 -04:00
parent edb5187e03
commit 451a05f546
9 changed files with 54 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/styles/abstracts/_placeholders.scss
View file

@ -172,7 +172,7 @@
%link { %link {
@include themify() { @include themify() {
text-decoration: none; text-decoration: none;
color: getThemifyVariable('secondary-text-color'); color: getThemifyVariable('inactive-text-color');
cursor: pointer; cursor: pointer;
&:hover { &:hover {
text-decoration: none; text-decoration: none;

21
client/styles/abstracts/_variables.scss
View file

@ -37,6 +37,7 @@ $darkest: #000;
$themes: ( $themes: (
light: ( light: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
logo-background-color: $lightest,
heavy-text-color: $darker, heavy-text-color: $darker,
primary-text-color: $dark, primary-text-color: $dark,
secondary-text-color: $medium-dark, secondary-text-color: $medium-dark,
@ -75,6 +76,7 @@ $themes: (
file-selected-color: $medium-light, file-selected-color: $medium-light,
input-text-color: $dark, input-text-color: $dark,
input-background-color: $lightest, input-background-color: $lightest,
input-secondary-background-color: $lightest,
input-border-color: $middle-light, input-border-color: $middle-light,
search-background-color: $lightest, search-background-color: $lightest,
search-clear-background-color: $light, search-clear-background-color: $light,
@ -109,6 +111,7 @@ $themes: (
), ),
dark: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
logo-background-color: $lightest,
heavy-text-color: $lightest, heavy-text-color: $lightest,
primary-text-color: $lightest, primary-text-color: $lightest,
dropzone-text-color: $black, dropzone-text-color: $black,
@ -147,6 +150,7 @@ $themes: (
file-selected-color: $medium-dark, file-selected-color: $medium-dark,
input-text-color: $lightest, input-text-color: $lightest,
input-background-color: $dark, input-background-color: $dark,
input-secondary-background-color: $medium-dark,
input-border-color: $middle-dark, input-border-color: $middle-dark,
search-background-color: $lightest, search-background-color: $lightest,
search-clear-background-color: $medium-dark, search-clear-background-color: $medium-dark,
@ -179,6 +183,7 @@ $themes: (
), ),
contrast: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
logo-background-color: $darker,
heavy-text-color: $yellow, heavy-text-color: $yellow,
primary-text-color: $lightest, primary-text-color: $lightest,
dropzone-text-color: $black, dropzone-text-color: $black,
@ -217,6 +222,7 @@ $themes: (
file-selected-color: $medium-dark, file-selected-color: $medium-dark,
input-text-color: $lightest, input-text-color: $lightest,
input-background-color: $dark, input-background-color: $dark,
input-secondary-background-color: $medium-dark,
input-border-color: $middle-dark, input-border-color: $middle-dark,
search-background-color: $white, search-background-color: $white,
search-clear-background-color: $medium-dark, search-clear-background-color: $medium-dark,
@ -226,7 +232,7 @@ $themes: (
nav-hover-color: $yellow, nav-hover-color: $yellow,
nav-border-color: $middle-dark, nav-border-color: $middle-dark,
error-color: $p5-contrast-pink, error-color: $p5-contrast-pink,
table-row-stripe-color: dark, table-row-stripe-color: $dark,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg), codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg), codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
@ -249,11 +255,16 @@ $themes: (
) )
); );
$console-warn-color: #ffbe05; $toast-background-color: $medium-dark;
$console-error-color: #ff5f52;
$toast-background-color: #4A4A4A;
$toast-text-color: $lightest; $toast-text-color: $lightest;
$light-console-error-color: #D11518;
$light-console-warn-color: #FAAF00;
$light-console-debug-color: #007BBB;
$dark-console-error-color: #DF3A3D;
$dark-console-warn-color: #F5BC38;
$dark-console-debug-color: #0C99E2;
$about-play-background-color: rgba(255, 255, 255, 0.7); $about-play-background-color: rgba(255, 255, 255, 0.7);
$about-button-border-color: rgba(151, 151, 151, 0.7); $about-button-border-color: rgba(151, 151, 151, 0.7);

12
client/styles/components/_collection.scss
View file

@ -39,12 +39,8 @@
// padding: #{8 / $base-font-size}rem 0; // padding: #{8 / $base-font-size}rem 0;
} }
.collection-metadata__name .editable-input__label span { .collection-metadata__name .editable-input__label {
padding: 0.83333rem 0; padding: 0.83333rem #{7 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('primary-text-color');
}
} }
.collection-metadata__name, .collection-metadata__name,
@ -63,9 +59,9 @@
} }
.collection-metadata__description { .collection-metadata__description {
margin-top: #{8 / $base-font-size}rem; padding-top: #{8 / $base-font-size}rem;
text-align: left; text-align: left;
font-size: 14px; font-size: #{14 / $base-font-size}rem;
} }
.collection-metadata__description .editable-input__label { .collection-metadata__description .editable-input__label {

31
client/styles/components/_editable-input.scss
View file

@ -4,15 +4,18 @@
align-items: center; align-items: center;
} }
.editable-input__label { button.editable-input__label {
display: flex; display: flex;
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('inactive-text-color');
& path {
fill: getThemifyVariable('inactive-text-color');
}
&:hover { &:hover {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('logo-color');
& .editable-input__icon path { & path {
fill: getThemifyVariable('primary-text-color'); fill: getThemifyVariable('logo-color');
} }
} }
} }
@ -23,23 +26,13 @@
font-weight: unset; font-weight: unset;
} }
.editable-input__input {
width: 100%;
}
.editable-input__icon svg { .editable-input__icon svg {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
@include themify() {
path {
fill: getThemifyVariable('inactive-text-color');
}
}
}
.editable-input:hover {
@include themify() {
.editable-input__icon path {
fill: getThemifyVariable('primary-text-color');
}
}
} }
.editable-input--is-not-editing .editable-input__input, .editable-input--is-not-editing .editable-input__input,
@ -49,5 +42,5 @@
.editable-input--is-editing .editable-input__input, .editable-input--is-editing .editable-input__input,
.editable-input--is-not-editing .editable-input__label { .editable-input--is-not-editing .editable-input__label {
display: block; display: flex;
} }

10
client/styles/components/_nav.scss
View file

@ -173,13 +173,19 @@
} }
.svg__logo g > path { .svg__logo g > path {
@include themify() { @include themify() {
fill: getThemifyVariable('logo-color'); fill: getThemifyVariable('logo-color');
} }
} }
.svg__logo g g:first-of-type path { .svg__logo g g:first-of-type path {
fill: none; fill: none;
} }
.svg__logo g g:first-of-type use {
@include themify() {
fill: getThemifyVariable('logo-background-color');
}
}
.nav__keyboard-shortcut { .nav__keyboard-shortcut {
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
font-family: Inconsololata, monospace; font-family: Inconsololata, monospace;

4
client/styles/components/_preferences.scss
View file

@ -99,9 +99,9 @@
.preference__label { .preference__label {
@include themify() { @include themify() {
color: getThemifyVariable("inactive-text-color"); color: getThemifyVariable("secondary-text-color");
&:hover { &:hover {
color: getThemifyVariable("primary-text-color"); color: getThemifyVariable("heavy-text-color");
} }
} }
margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem; margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;

2
client/styles/components/_sidebar.scss
View file

@ -235,7 +235,7 @@
margin-right: #{5 / $base-font-size}rem; margin-right: #{5 / $base-font-size}rem;
& g { & g {
@include themify() { @include themify() {
fill: getThemifyVariable('icon-color'); fill: getThemifyVariable('secondary-text-color');
} }
} }
& svg { & svg {

8
client/styles/components/_toolbar.scss
View file

@ -109,11 +109,11 @@
.toolbar__project-name { .toolbar__project-name {
@include themify() { @include themify() {
color: getThemifyVariable('logo-color'); color: getThemifyVariable('secondary-text-color');
&:hover { &:hover {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('logo-color');
& .toolbar__edit-name-button path { & .toolbar__edit-name-button path {
fill: getThemifyVariable('primary-text-color'); fill: getThemifyVariable('logo-color');
} }
} }
} }
@ -159,7 +159,7 @@
} }
@include themify() { @include themify() {
& path { & path {
fill: getThemifyVariable('logo-color'); fill: getThemifyVariable('secondary-text-color');
} }
} }
} }

7
client/styles/components/_uploader.scss
View file

@ -1,9 +1,14 @@
.dropzone { .dropzone {
@include themify() { @include themify() {
color: getThemifyVariable('dropzone-text-color'); background-color: getThemifyVariable('input-secondary-background-color');
color: getThemifyVariable('input-text-color');
} }
} }
.dropzone .dz-preview.dz-image-preview {
background-color: transparent;
}
.uploader { .uploader {
min-height: #{200 / $base-font-size}rem; min-height: #{200 / $base-font-size}rem;
width: 100%; width: 100%;