diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
index b679f8fb27a1bfddb9a7b6895efa5b6315855951..1864e7b2aaede98cf6f4b827db6ba63586275f47 100644
--- a/src/components/close-button/close-button.css
+++ b/src/components/close-button/close-button.css
@@ -9,7 +9,6 @@
overflow: hidden; /* Mask the icon animation */
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
- box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
user-select: none;
cursor: pointer;
@@ -22,8 +21,8 @@
}
.small {
- width: 1rem;
- height: 1rem;
+ width: 0.825rem;
+ height: 0.825rem;
color: #FFF;
background-color: $motion-primary;
}
@@ -31,6 +30,7 @@
.large {
width: 1.75rem;
height: 1.75rem;
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.close-icon {
@@ -42,7 +42,7 @@
}
.small .close-icon {
- width: 40%;
+ width: 50%;
}
.large .close-icon {
diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index 91b42d4cc59e69dc505975a90d22db22891b5253..6d5eefa52d5b2f4d5c0c558fb37aa1f05ad5e7c0 100644
--- a/src/components/forms/input.css
+++ b/src/components/forms/input.css
@@ -2,11 +2,13 @@
@import "../../css/colors.css";
.input-form {
- padding: $space 0.75rem;
+ height: 2rem;
+ padding: 0 0.75rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.625rem;
font-weight: bold;
+ color: $text-primary;
border-width: 1px;
border-style: solid;
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 5146c84f16e5340ab0be74a4340f40c3533ebbd6..6fce08e8c89cc4c06b05761c25d13a591e869700 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -123,13 +123,10 @@
}
.target-wrapper {
- /* Take all the available vertical space available.
- Works in tandem with height: 100%; which is set on the child: .targetPane
- @todo: Not working in Safari, not great in FFx
- */
+ display: flex;
flex-grow: 1;
flex-basis: 0;
-
+
padding-top: $space;
padding-left: $space;
padding-right: $space;
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index 12253a55202602010b71b2a98014d1ecbbe787df..067b2c1af3328a80dd5e228d810d6129f1788617 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -1,3 +1,4 @@
+@import "../../css/colors.css";
@import "../../css/units.css";
.library-item {
@@ -11,7 +12,7 @@
margin: $space;
padding: 1rem 1rem 0 1rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #575e75;
+ color: $text-primary;
background: white;
border-width: 2px;
border-style: solid;
diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index 88fb5773f14dc0589be7a2796f5a3d9b6a900fe5..257c59d655357a096638cc18c6ac6b4dbde5a3b6 100644
--- a/src/components/sound-editor/sound-editor.css
+++ b/src/components/sound-editor/sound-editor.css
@@ -49,7 +49,7 @@ $border-radius: 0.25rem;
transition: 0.2s;
}
-.button img {
+.button > img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
@@ -62,6 +62,10 @@ $border-radius: 0.25rem;
padding-right: 10px; /* To equalize with empty whitespace from image on left */
}
+.trim-button > img {
+ width: 1.5rem;
+}
+
.trim-button-active {
filter: hue-rotate(155deg); /* @todo replace blue -> red with real submit icon */
}
@@ -74,7 +78,7 @@ $border-radius: 0.25rem;
.effect-button {
flex-basis: 150px;
- color: #575e75; /* @todo discuss the multiple font colors with Carl, move to variable */
+ color: $text-primary;
}
.effect-button + .effect-button {
diff --git a/src/components/sprite-info/icon--hide.svg b/src/components/sprite-info/icon--hide.svg
index 9463538707630dcc89773e8e0f9c5800a22a2a64..2fd66b8300966bd93aae01b51358b760d5815ec4 100644
Binary files a/src/components/sprite-info/icon--hide.svg and b/src/components/sprite-info/icon--hide.svg differ
diff --git a/src/components/sprite-info/icon--show.svg b/src/components/sprite-info/icon--show.svg
index db06b704809d81c056f3873dcb1583ffc82afb9a..fe54ed568913266746b3086cc649164218523a3e 100644
Binary files a/src/components/sprite-info/icon--show.svg and b/src/components/sprite-info/icon--show.svg differ
diff --git a/src/components/sprite-info/icon--x.svg b/src/components/sprite-info/icon--x.svg
index 4d3cbc3a1cd7c5ddd964416e8d4fe750d1b924f2..57b1852f587167e33499b395c083939c4ae21059 100644
Binary files a/src/components/sprite-info/icon--x.svg and b/src/components/sprite-info/icon--x.svg differ
diff --git a/src/components/sprite-info/icon--y.svg b/src/components/sprite-info/icon--y.svg
index 5fe7df308aa6b56b20450b97093ca767bf5c08e2..f8eab05ef0a6b673869d6db5ffaa321029f98d9d 100644
Binary files a/src/components/sprite-info/icon--y.svg and b/src/components/sprite-info/icon--y.svg differ
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index e6a758d1c44936e7f3a35a9faa7a2cda6ee6a2a8..200aedaf79f13627abf74a4c9378ccb0f60eb300 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -3,10 +3,10 @@
.sprite-info {
height: $sprite-info-height;
- padding: $space;
+ padding: 0.75rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: white;
- color: #575e75;
+ color: $text-primary;
border-top-left-radius: $space;
border-top-right-radius: $space;
border-bottom: 1px solid #eaeaea;
@@ -17,7 +17,9 @@
justify-content: space-between;
}
-.row-primary { margin-bottom: $space; }
+.row-primary {
+ margin-bottom: 0.5rem;
+}
.label { opacity: 0.8; }
@@ -29,15 +31,10 @@
.icon-wrapper {
display: inline-block;
-
- /*
- content-box is normally the browser's default.
- We're overriding the global, which we set to border-box
- */
box-sizing: content-box;
- width: 1.25rem;
- height: 1.25rem;
- padding: calc($space / 2);
+ width: 1rem;
+ height: 1rem;
+ padding: 0.5rem;
outline: none;
user-select: none;
}
@@ -48,9 +45,16 @@
}
/* @todo: refactor radio divs to input */
-.radio { opacity: 0.4; cursor: pointer; }
-.radio.is-active { opacity: 1; }
-.radio.is-disabled { cursor: default; }
+.radio {
+ filter: saturate(0);
+ cursor: pointer;
+}
+.radio.is-active {
+ filter: none;
+}
+.radio.is-disabled {
+ cursor: default;
+}
.radio-left {
border: 1px solid $form-border;
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index 8b3f212d99dfa870db88c6338f4efd09cfe0a643..f9bbb64e32748af1f955db724d8dc113caea8648 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -97,49 +97,50 @@ class SpriteInfo extends React.Component {
<div className={classNames(styles.row, styles.rowSecondary)}>
<div className={styles.group}>
- <Label
- secondary
- text="Show"
- >
- <div>
- <div
- className={classNames(
- styles.radio,
- styles.radioLeft,
- styles.iconWrapper,
- {
- [styles.isActive]: this.props.visible && !this.props.disabled,
- [styles.isDisabled]: this.props.disabled
- }
- )}
- tabIndex="4"
- onClick={this.props.onClickVisible}
- >
- <img
- className={styles.icon}
- src={showIcon}
- />
- </div>
- <div
- className={classNames(
- styles.radio,
- styles.radioRight,
- styles.iconWrapper,
- {
- [styles.isActive]: !this.props.visible && !this.props.disabled,
- [styles.isDisabled]: this.props.disabled
- }
- )}
- tabIndex="4"
- onClick={this.props.onClickNotVisible}
- >
- <img
- className={styles.icon}
- src={hideIcon}
- />
- </div>
+ <MediaQuery minWidth={layout.fullSizeMinWidth}>
+ <Label
+ secondary
+ text="Show"
+ />
+ </MediaQuery>
+ <div>
+ <div
+ className={classNames(
+ styles.radio,
+ styles.radioLeft,
+ styles.iconWrapper,
+ {
+ [styles.isActive]: this.props.visible && !this.props.disabled,
+ [styles.isDisabled]: this.props.disabled
+ }
+ )}
+ tabIndex="4"
+ onClick={this.props.onClickVisible}
+ >
+ <img
+ className={styles.icon}
+ src={showIcon}
+ />
</div>
- </Label>
+ <div
+ className={classNames(
+ styles.radio,
+ styles.radioRight,
+ styles.iconWrapper,
+ {
+ [styles.isActive]: !this.props.visible && !this.props.disabled,
+ [styles.isDisabled]: this.props.disabled
+ }
+ )}
+ tabIndex="4"
+ onClick={this.props.onClickNotVisible}
+ >
+ <img
+ className={styles.icon}
+ src={hideIcon}
+ />
+ </div>
+ </div>
</div>
<div className={styles.group}>
<Label
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index faf7c36125223cbd400d2ae1c64fb40d8a58d51b..60f8393565b8d2e4068a005dd5bc65f4e00dbef4 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -1,4 +1,5 @@
@import "../../css/units.css";
+@import "../../css/colors.css";
/* @todo: refactor this class name, and component: `sprite-selector` to `sprite` */
.sprite-selector-item {
@@ -17,22 +18,16 @@
border-radius: $space;
text-align: center;
cursor: pointer;
-}
-
-.sprite-selector-item:hover {
- border-width: 2px;
- border-color: #1dacf4;
transition: 0.25s ease-out;
}
-/* @todo: refactor out descendent selectors into regular classes */
.sprite-selector-item.is-selected {
- border-width: 2px;
- border-color: #1dacf4;
- transition: 0.25s ease-out;
+ border: 2px solid $motion-primary;
+ box-shadow: 0px 0px 0px 3px $motion-transparent;
}
-.sprite-selector-item.is-selected .info-button {
- display: block;
+
+.sprite-selector-item:hover {
+ border: 2px solid $motion-primary;
}
.sprite-image {
@@ -44,7 +39,7 @@
font-size: 0.625rem;
margin: 0.15rem;
user-select: none;
-
+
/*
For truncating overflowing text gracefully
Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index 496d19588341fa4b7ae87bef8389b171d1efb9fb..8c1e2315a4dd79294d91585154301fbce4ffe820 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -30,7 +30,7 @@
*/
box-sizing: border-box;
width: calc((100% / $sprites-per-row ) - $space);
-
+ min-width: 4rem;
min-height: 4rem; /* @todo: calc height same as width */
margin: calc($space / 2);
}
@@ -64,6 +64,6 @@
font-size: 0.55rem;
font-weight: bold;
position: absolute;
- bottom: 0.5rem;
- right: 0.5rem;
+ bottom: 0.75rem;
+ right: 1rem;
}
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index f3f01a5eb6e86a2959673ebb32653c1792a851e9..73df5305ff6823fbfbd70e665bfb1e183f98af1a 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -1,19 +1,34 @@
@import "../../css/units.css";
+@import "../../css/colors.css";
-$header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
+$header-height: calc($stage-menu-height - 2px);
.stage-selector {
- position: relative; /* for the child element border */
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative; /* For the add backdrop button */
+ flex-grow: 1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- background-color: white;
- color: #575e75;
+ background-color: #fff;
+ color: $text-primary;
border-top-left-radius: $space;
border-top-right-radius: $space;
border-color: #dbdbdb;
border-width: 1px;
border-style: solid;
border-bottom: 0;
+ cursor: pointer;
+ transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
+}
+
+.stage-selector.is-selected {
+ border-color: $motion-primary;
+ box-shadow: 0px 0px 0px 3px $motion-transparent;
+}
+
+.stage-selector:hover {
+ border-color: $motion-primary;
}
.header {
@@ -22,82 +37,45 @@ $header-height: 2.5rem; /* @todo: half the SpriteInfo area header? */
align-items: center;
justify-content: center;
height: $header-height;
- padding: 0.5rem 0.5rem 0.5rem 0.25rem;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: white;
- color: #575e75;
+ color: $text-primary;
border-top-left-radius: $space;
border-top-right-radius: $space;
border-bottom: 1px solid #eaeaea;
+ width: 100%;
}
.header-title {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.625rem;
font-weight: bold;
- color: #575e75;
+ color: $text-primary;
/* @todo: make this a mixin for all UI text labels */
user-select: none;
- cursor: default;
-}
-
-.body {
- justify-content: space-around;
- padding: $space;
- height: calc(100% - $header-height);
- background-color: #f9f9f9;
}
.count {
- margin: 0 0 0.3rem 0;
- padding: 0.15rem 0.5rem;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ padding: 0.3rem 0.75rem;
font-size: 0.625rem;
- font-weight: bold;
- color: #575e75;
- background: #ededed;
+ color: $text-primary;
+ background: white;
+ border: 1px solid #eaeaea;
border-radius: 0.25rem;
user-select: none;
}
.label {
- margin: 0.4rem 0 0.25rem;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 0.5rem;
- font-weight: bold;
- color: #575e75;
+ margin: 0.75rem 0 0.25rem;
+ font-size: 0.6rem;
+ color: $text-primary;
user-select: none;
}
-$border-width: 2px;
-
-.flex-wrapper {
- display: flex;
- flex-direction: column; /* makes rows */
- align-items: center;
- overflow: hidden;
- background-color: white;
- border-radius: calc($space / 2);
- border-width: $border-width;
- border-style: solid;
- border-color: #e9eef2;
- cursor: pointer;
- transition: border-color 0.1s ease-out;
-}
-
-.flex-wrapper:hover {
- border-color: #1dacf4;
-}
-
-.flex-wrapper.is-selected {
- border-color: #1dacf4;
-}
-
.costume-canvas {
display: block;
width: 100%;
user-select: none;
+ border-bottom: 1px solid #eaeaea;
}
.add-button {
@@ -105,6 +83,6 @@ $border-width: 2px;
font-weight: bold;
text-align: center;
position: absolute;
- bottom: 0.5rem;
+ bottom: 0.75rem;
left: 0.25rem;
}
diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx
index ec5fbb36d2d6d387c0477a1aa55d8a0ccc0a1459..93002f9efb461e2b141104024711df8f5bc0b625 100644
--- a/src/components/stage-selector/stage-selector.jsx
+++ b/src/components/stage-selector/stage-selector.jsx
@@ -28,38 +28,37 @@ const StageSelector = props => {
} = props;
return (
<Box
- className={styles.stageSelector}
+ className={classNames(styles.stageSelector, {
+ [styles.isSelected]: selected
+ })}
onClick={onClick}
{...componentProps}
>
<div className={styles.header}>
<div className={styles.headerTitle}>Stage</div>
</div>
- <div className={styles.body}>
- <div
- className={classNames({
- [styles.flexWrapper]: true,
- [styles.isSelected]: selected
- })}
- >
- {url ? (
- <CostumeCanvas
- className={styles.costumeCanvas}
- height={42}
- url={url}
- width={56}
- />
- ) : null}
- <div className={styles.label}>Backdrops</div>
- <div className={styles.count}>{backdropCount}</div>
- </div>
- <IconButton
- className={styles.addButton}
- img={backdropIcon}
- title={addBackdropMessage}
- onClick={onNewBackdropClick}
+ {url ? (
+ <CostumeCanvas
+ className={styles.costumeCanvas}
+ height={42}
+ url={url}
+ width={56}
+ />
+ ) : null}
+ <div className={styles.label}>
+ <FormattedMessage
+ defaultMessage="Backdrops"
+ description="Label for the backdrops in the stage selector"
+ id="stageSelector.backdrops"
/>
</div>
+ <div className={styles.count}>{backdropCount}</div>
+ <IconButton
+ className={styles.addButton}
+ img={backdropIcon}
+ title={addBackdropMessage}
+ onClick={onNewBackdropClick}
+ />
</Box>
);
};
diff --git a/src/components/target-pane/target-pane.css b/src/components/target-pane/target-pane.css
index 380200ff52503aef919dad684d0d75e1989e06f4..404283d19fd8c77bafc1e9f0b307628168d1cfc4 100644
--- a/src/components/target-pane/target-pane.css
+++ b/src/components/target-pane/target-pane.css
@@ -4,22 +4,12 @@
/* Makes columns for the sprite library selector + and the stage selector */
display: flex;
flex-direction: row;
-
- height: 100%;
+ flex-grow: 1;
}
.stage-selector-wrapper {
+ display: flex;
flex-basis: 72px;
flex-shrink: 0;
margin-left: calc($space / 2);
}
-
-.add-button-wrapper {
- position: absolute;
- z-index: 1;
- bottom: 0.5rem;
- border: 0;
- transition: all 0.15s ease-out; /* @todo: standardize with var */
- cursor: pointer;
- user-select: none;
-}
diff --git a/src/css/colors.css b/src/css/colors.css
index 45258f13a7243bea9ddadb239654b3afe42473be..ea3f5936f3219493eddf95bccd01ba50d29e0ffc 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -2,8 +2,11 @@ $ui-pane-border: #D9D9D9;
$ui-pane-gray: #F9F9F9;
$ui-background-blue: #e8edf1;
+$text-primary: #575e75;
+
$motion-primary: #4C97FF;
$motion-tertiary: #3373CC;
+$motion-transparent: hsla(215, 100%, 65%, 0.20);
$red-primary: #FF661A;
$red-tertiary: #E64D00;
diff --git a/src/css/units.css b/src/css/units.css
index d951e3e1a874a4b34f22483d8d6cdc977d772e32..3de6174a2fe38b65148f7d99a5e459950e37160a 100644
--- a/src/css/units.css
+++ b/src/css/units.css
@@ -3,8 +3,8 @@ $space: 0.5rem;
$sprites-per-row: 5;
$menu-bar-height: 3rem;
-$sprite-info-height: 5.25rem; /* @todo: SpriteInfo isn't explicitly set to this height yet */
-$stage-menu-height: 3rem;
+$sprite-info-height: 6rem;
+$stage-menu-height: 2.75rem;
$library-header-height: 4.375rem;