trent
/
fcc-challenges
mirror of https://github.com/TrentSPalmer/fcc-challenges.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

drum-machine add css color variables

This commit is contained in:
Trent Palmer 2020-05-27 10:46:00 -07:00
parent fd567ae6ea
commit bd26df5b90
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
drum-machine/drumMachine.css
View File

@ -1,3 +1,11 @@
:root {
--global-first-color: #756d58;
--global-second-color: #586075;
--global-third-color: #607558;
--global-fourth-color: #6d5875;
--global-black-color: #333333;
}
body { body {
overflow: hidden; overflow: hidden;
height: 100vh; height: 100vh;
@ -5,7 +13,7 @@ body {
} }
.tool-tip-class { .tool-tip-class {
background-color: #756d58; background-color: var(--global-first-color);
font-size: 2rem; font-size: 2rem;
font-style: oblique; font-style: oblique;
border-color: black !important; border-color: black !important;
@ -23,7 +31,7 @@ body {
} }
#drum-machine { #drum-machine {
background-color: #756d58; background-color: var(--global-first-color);
height: 100vh; height: 100vh;
width: 100%; width: 100%;
display: flex; display: flex;
@ -31,7 +39,7 @@ body {
} }
#display { #display {
background-color: #586075; background-color: var(--global-second-color);
margin: auto; margin: auto;
height: 70vh; height: 70vh;
min-height: 400px; min-height: 400px;
@ -77,7 +85,7 @@ body {
#drum-pad-grid { #drum-pad-grid {
margin: auto; margin: auto;
background-color: #607558; background-color: var(--global-third-color);
border-radius: 1rem; border-radius: 1rem;
width: 54vh; width: 54vh;
height: 45vh; height: 45vh;
@ -97,7 +105,7 @@ body {
.drum-pad { .drum-pad {
border-radius: 1rem; border-radius: 1rem;
width: 33%; width: 33%;
background-color: #6d5875; background-color: var(--global-fourth-color);
border: black; border: black;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
@ -117,7 +125,7 @@ body {
.selectionMenu { .selectionMenu {
margin: auto; margin: auto;
background-color: #607558; background-color: var(--global-third-color);
border-radius: 1rem; border-radius: 1rem;
width: 54vh; width: 54vh;
height: 45vh; height: 45vh;
@ -125,13 +133,13 @@ body {
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
scrollbar-color: black #6d5875; scrollbar-color: black var(--global-fourth-color);
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.selectionMenu::-webkit-scrollbar { .selectionMenu::-webkit-scrollbar {
background-color: #6d5875; background-color: var(--global-fourth-color);
} }
.selectionMenu::-webkit-scrollbar-thumb { .selectionMenu::-webkit-scrollbar-thumb {
@ -140,7 +148,7 @@ body {
.selectionMenuItem, .volumeSelectionMenuItem, .metronomeSelectionMenuItem { .selectionMenuItem, .volumeSelectionMenuItem, .metronomeSelectionMenuItem {
min-height: min-content; min-height: min-content;
background-color: #6d5875; background-color: var(--global-fourth-color);
margin: 10px 20px 20px 10px; margin: 10px 20px 20px 10px;
padding: 15px; padding: 15px;
border-radius: 1rem; border-radius: 1rem;
@ -197,7 +205,7 @@ body {
min-width: 110px; min-width: 110px;
height: 12vh; height: 12vh;
min-height: 80px; min-height: 80px;
background-color: #6d5875; background-color: var(--global-fourth-color);
border-radius: 1rem; border-radius: 1rem;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
@ -227,13 +235,13 @@ body {
margin-bottom: 13px; margin-bottom: 13px;
height: 205px; height: 205px;
width: 4px; width: 4px;
background: #333333; background: var(--global-black-color);
border-radius: 4px; border-radius: 4px;
border: none; border: none;
} }
#volume > .ui-slider-range { #volume > .ui-slider-range {
background: #333333; background: var(--global-black-color);
border: none; border: none;
outline: none; outline: none;
} }
@ -245,18 +253,18 @@ body {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 30px; border-radius: 30px;
background: #333333; background: var(--global-black-color);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
i.fa-volume-down { i.fa-volume-down {
color: #333333; color: var(--global-black-color);
margin-left: -5px; margin-left: -5px;
} }
i.fa-volume-up { i.fa-volume-up {
color: #333333; color: var(--global-black-color);
margin-left: -5px; margin-left: -5px;
} }
@ -434,6 +442,7 @@ i.fa-volume-up {
padding: unset; padding: unset;
} }
} }
@media (orientation: landscape) and (max-device-height: 767px) { @media (orientation: landscape) and (max-device-height: 767px) {
#drum-pad-grid { #drum-pad-grid {
min-width: unset; min-width: unset;