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

Make minor adjustments in all themes

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 {
@include themify() {
text-decoration: none;
color: getThemifyVariable('secondary-text-color');
color: getThemifyVariable('inactive-text-color');
cursor: pointer;
&:hover {
text-decoration: none;

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

@ -37,6 +37,7 @@ $darkest: #000;
$themes: (
light: (
logo-color: $p5js-pink,
logo-background-color: $lightest,
heavy-text-color: $darker,
primary-text-color: $dark,
secondary-text-color: $medium-dark,
@ -75,6 +76,7 @@ $themes: (
file-selected-color: $medium-light,
input-text-color: $dark,
input-background-color: $lightest,
input-secondary-background-color: $lightest,
input-border-color: $middle-light,
search-background-color: $lightest,
search-clear-background-color: $light,
@ -109,6 +111,7 @@ $themes: (
),
dark: (
logo-color: $p5js-pink,
logo-background-color: $lightest,
heavy-text-color: $lightest,
primary-text-color: $lightest,
dropzone-text-color: $black,
@ -147,6 +150,7 @@ $themes: (
file-selected-color: $medium-dark,
input-text-color: $lightest,
input-background-color: $dark,
input-secondary-background-color: $medium-dark,
input-border-color: $middle-dark,
search-background-color: $lightest,
search-clear-background-color: $medium-dark,
@ -179,6 +183,7 @@ $themes: (
),
contrast: (
logo-color: $yellow,
logo-background-color: $darker,
heavy-text-color: $yellow,
primary-text-color: $lightest,
dropzone-text-color: $black,
@ -217,6 +222,7 @@ $themes: (
file-selected-color: $medium-dark,
input-text-color: $lightest,
input-background-color: $dark,
input-secondary-background-color: $medium-dark,
input-border-color: $middle-dark,
search-background-color: $white,
search-clear-background-color: $medium-dark,
@ -226,7 +232,7 @@ $themes: (
nav-hover-color: $yellow,
nav-border-color: $middle-dark,
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-closed: url(../images/triangle-arrow-right-white.svg),
@ -249,11 +255,16 @@ $themes: (
)
);
$console-warn-color: #ffbe05;
$console-error-color: #ff5f52;
$toast-background-color: #4A4A4A;
$toast-background-color: $medium-dark;
$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-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;
}
.collection-metadata__name .editable-input__label span {
padding: 0.83333rem 0;
@include themify() {
color: getThemifyVariable('primary-text-color');
}
.collection-metadata__name .editable-input__label {
padding: 0.83333rem #{7 / $base-font-size}rem;
}
.collection-metadata__name,
@ -63,9 +59,9 @@
}
.collection-metadata__description {
margin-top: #{8 / $base-font-size}rem;
padding-top: #{8 / $base-font-size}rem;
text-align: left;
font-size: 14px;
font-size: #{14 / $base-font-size}rem;
}
.collection-metadata__description .editable-input__label {

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

@ -4,15 +4,18 @@
align-items: center;
}
.editable-input__label {
button.editable-input__label {
display: flex;
@include themify() {
color: getThemifyVariable('inactive-text-color');
& path {
fill: getThemifyVariable('inactive-text-color');
}
&:hover {
color: getThemifyVariable('primary-text-color');
& .editable-input__icon path {
fill: getThemifyVariable('primary-text-color');
color: getThemifyVariable('logo-color');
& path {
fill: getThemifyVariable('logo-color');
}
}
}
@ -23,23 +26,13 @@
font-weight: unset;
}
.editable-input__input {
width: 100%;
}
.editable-input__icon svg {
width: 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,
@ -49,5 +42,5 @@
.editable-input--is-editing .editable-input__input,
.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 {
@include themify() {
fill: getThemifyVariable('logo-color');
}
fill: getThemifyVariable('logo-color');
}
}
.svg__logo g g:first-of-type path {
fill: none;
}
.svg__logo g g:first-of-type use {
@include themify() {
fill: getThemifyVariable('logo-background-color');
}
}
.nav__keyboard-shortcut {
font-size: #{12 / $base-font-size}rem;
font-family: Inconsololata, monospace;

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

@ -99,9 +99,9 @@
.preference__label {
@include themify() {
color: getThemifyVariable("inactive-text-color");
color: getThemifyVariable("secondary-text-color");
&:hover {
color: getThemifyVariable("primary-text-color");
color: getThemifyVariable("heavy-text-color");
}
}
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;
& g {
@include themify() {
fill: getThemifyVariable('icon-color');
fill: getThemifyVariable('secondary-text-color');
}
}
& svg {

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

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

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

@ -1,9 +1,14 @@
.dropzone {
@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 {
min-height: #{200 / $base-font-size}rem;
width: 100%;