Browse Source

Make accidentals more prominent

Adjust metrics of styled accidentals.
master
TheoryOfNekomata 4 years ago
parent
commit
518877565b
3 changed files with 17 additions and 24 deletions
  1. +15
    -23
      src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
  2. +1
    -1
      src/components/StyledNaturalKey/StyledNaturalKey.tsx
  3. +1
    -0
      tsconfig.json

+ 15
- 23
src/components/StyledAccidentalKey/StyledAccidentalKey.tsx View File

@@ -107,9 +107,8 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
<div
style={{
width: 'calc(2px * var(--size-scale-factor, 1))',
height: 'calc(11px * var(--size-scale-factor, 1))',
padding:
'calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) 0',
height: 'calc(10 / 52 * 100%)',
padding: '0 calc(1px * var(--size-scale-factor, 1)) 0 0',
boxSizing: 'border-box',
position: 'absolute',
top: 0,
@@ -131,16 +130,13 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
<div
style={{
width: 'calc(2px * var(--size-scale-factor, 1))',
height: '100%',
padding:
'calc(10px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(6px * var(--size-scale-factor, 1)) 0',
height: hasKeyChannels ? 'calc(38 / 52 * 100%)' : 'calc(34 / 52 * 100%)',
boxSizing: 'border-box',
position: 'absolute',
top: 0,
bottom: hasKeyChannels ? 'calc(4 / 52 * 100%)' : 'calc(8 / 52 * 100%)',
right: 0,
paddingBottom: hasKeyChannels
? 'calc(3px * var(--size-scale-factor, 1))'
: 'calc(5px * var(--size-scale-factor, 1))',
paddingRight: 'calc(1px * var(--size-scale-factor, 1))',
paddingLeft: 0,
opacity: hasKeyChannels ? 0.5 : '1',
}}
>
@@ -157,6 +153,7 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
<div
style={{
width: '100%',
height: hasKeyChannels ? 'calc(2 / 52 * 100%)' : 'calc(6 / 52 * 100%)',
padding:
'0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
boxSizing: 'border-box',
@@ -180,12 +177,11 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
<div
style={{
width: '100%',
height: '100%',
padding:
'calc(3px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1)) calc(7px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1))',
height: hasKeyChannels ? 'calc(42 / 52 * 100%)' : 'calc(38 / 52 * 100%)',
padding: '0 calc(3px * var(--size-scale-factor, 1)) 0 calc(3px * var(--size-scale-factor, 1))',
boxSizing: 'border-box',
position: 'absolute',
top: 0,
top: 'calc(3px * var(--size-scale-factor, 1))',
left: 0,
}}
>
@@ -204,18 +200,14 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
<div
style={{
width: '100%',
padding:
'0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
paddingTop: 0,
paddingRight: 'calc(1px * var(--size-scale-factor, 1))',
paddingLeft: 'calc(2px * var(--size-scale-factor, 1))',
boxSizing: 'border-box',
position: 'absolute',
bottom: 0,
bottom: hasKeyChannels ? 'calc(4 / 52 * 100%)' : 'calc(8 / 52 * 100%)',
left: 0,
height: hasKeyChannels
? 'calc(4px * var(--size-scale-factor, 1))'
: 'calc(6px * var(--size-scale-factor, 1))',
paddingBottom: hasKeyChannels
? 'calc(3px * var(--size-scale-factor, 1))'
: 'calc(5px * var(--size-scale-factor, 1))',
height: 'calc(1px * var(--size-scale-factor, 1))',
opacity: hasKeyChannels ? 0.5 : '1',
}}
>


+ 1
- 1
src/components/StyledNaturalKey/StyledNaturalKey.tsx View File

@@ -64,7 +64,7 @@ const StyledNaturalKey: React.FC<Props> = ({ keyChannels }) => {
left: '0',
maskImage: 'linear-gradient(to bottom, transparent, white)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent, white)',
backgroundColor: hasKeyChannels ? 'black' : LIGHT_COLOR,
backgroundColor: LIGHT_COLOR,
opacity: hasKeyChannels ? 0.12 : 0.25,
}}
/>


+ 1
- 0
tsconfig.json View File

@@ -11,6 +11,7 @@
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",


Loading…
Cancel
Save