css

src/components/paint-editor.css

@@ -0,0 +1,145 @@
+$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;
+
+$sound-primary: #CF63CF;
+$sound-tertiary: #A63FA6;
+
+$control-primary: #FFAB19;
+
+$form-border: #E9EEF2;
+
+$space: 0.5rem;
+
+$sprites-per-row: 5;
+
+$menu-bar-height: 3rem;
+$sprite-info-height: 6rem;
+$stage-menu-height: 2.75rem;
+
+$library-header-height: 4.375rem;
+
+$form-radius: calc($space / 2);
+
+
+.editor-container {
+    display: flex;
+    flex-direction: column;
+    padding: calc(2 * $space);
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.row + .row {
+    margin-top: calc(2 * $space);
+}
+
+.input-group + .input-group {
+    margin-left: calc(2 * $space);
+}
+
+.waveform-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+
+    position: relative;
+
+    background: $ui-pane-gray;
+    border: 1px solid $ui-pane-border;
+    border-radius: 5px;
+    padding: 3px;
+}
+
+$border-radius: 0.25rem;
+
+.button {
+    height: 2rem;
+    padding: 0.25rem;
+    outline: none;
+    background: white;
+    border-radius: $border-radius;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: 0.2s;
+}
+
+.button > img {
+    flex-grow: 1;
+    max-width: 100%;
+    max-height: 100%;
+    min-width: 1.5rem;
+}
+
+.trim-button {
+    display: flex;
+    align-items: center;
+    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 */
+}
+
+.input-group-right {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.effect-button {
+    flex-basis: 150px;
+    color: $text-primary;
+}
+
+.effect-button + .effect-button {
+    margin: 0;
+}
+
+.effect-button img {
+    width: 60px;
+    height: 60px;
+}
+
+.button-group {
+    margin: 0 1rem;
+}
+
+.button-group .button {
+    border-radius: 0;
+    border-left: none;
+}
+
+.button-group .button:last-of-type {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+}
+
+.button-group .button:first-of-type {
+    border-left: 1px solid #ddd;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+}
+
+.button:disabled > img {
+    opacity: 0.25;
+}