diff --git a/src/App.css b/src/App.css index e65aaf8..caffd66 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,6 @@ .App { text-align: center; + } .App-logo { diff --git a/src/features/timbre/Timbre.module.css b/src/features/timbre/Timbre.module.css index a69bd3f..54e02a6 100644 --- a/src/features/timbre/Timbre.module.css +++ b/src/features/timbre/Timbre.module.css @@ -1,12 +1,15 @@ .timbreStyle { - display: flex; + display: inline-flex; flex-wrap: wrap; flex-direction: row; justify-content: center; + } -.lineBreak { - width: 100%; +@media screen and (min-width: 1824) { + .lineBreak { + width: 100%; + } } .buttonContainer { @@ -26,19 +29,30 @@ border: 2px solid slateblue; } +.tabs { + height: 100vh; + display: flex; + flex-direction: column; +} + .tabList { - position: fixed; + border-bottom: 1px solid black; display: inline-flex; flex-direction: row; list-style-type: none; + justify-content: center; top: 0; - left: 30%; -} + padding: 0; + margin: 0; + width: 100vw; + background: white; +} .tab { + width: 78px; background: white; color: slategrey; - font-size: 1em; + font-size: 0.75em; margin: 0.75em 1em; padding: 0.25em 1em; border: 2px solid slategrey; @@ -73,6 +87,26 @@ } } .tabPanel { + + padding: 1em 0; + height: 100%; animation: slideeffect 0.6s ease-in-out; opacity: 1; + overflow-y: scroll; } +.tabPanel::-webkit-scrollbar { + width: 0.25em; +} + +.tabPanel::-webkit-scrollbar-track, .tabPanel::-webkit-scrollbar-thumb { + background-color: transparent; + +} +.tabPanel:hover::-webkit-scrollbar-track { + background-color: lightgray; +} + +.tabPanel:hover::-webkit-scrollbar-thumb { + background-color: slateblue; + border-radius: 6px; +} \ No newline at end of file diff --git a/src/features/timbre/parameters/Parameters.module.css b/src/features/timbre/parameters/Parameters.module.css index 6bbe647..7c3c3e0 100644 --- a/src/features/timbre/parameters/Parameters.module.css +++ b/src/features/timbre/parameters/Parameters.module.css @@ -6,7 +6,7 @@ padding: 16pt; margin: 10pt; border: solid 1pt black; - width: 160px; + width: 15%; height: 214px; line-height: 1.5em; } diff --git a/src/features/timbre/timbreSwitcher.js b/src/features/timbre/timbreSwitcher.js index ba4f911..181e248 100644 --- a/src/features/timbre/timbreSwitcher.js +++ b/src/features/timbre/timbreSwitcher.js @@ -6,8 +6,9 @@ import styles from './Timbre.module.css'; export default function TimbreSwitcher(props) { return ( -
+
@@ -15,6 +16,8 @@ export default function TimbreSwitcher(props) { Timbre 1 Timbre 2 Vocoder + Effects + Arpeggio diff --git a/src/index.css b/src/index.css index ec2585e..bdfc3c8 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,8 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + overflow: hidden; + height: 100vh; } code {