diff options
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/720.scss | 5 | ||||
| -rw-r--r-- | src/styles/app.scss | 22 | ||||
| -rw-r--r-- | src/styles/main.scss | 53 | ||||
| -rw-r--r-- | src/styles/portrait.scss | 3 |
4 files changed, 30 insertions, 53 deletions
diff --git a/src/styles/720.scss b/src/styles/720.scss index e69de29..2e9bd3c 100644 --- a/src/styles/720.scss +++ b/src/styles/720.scss @@ -0,0 +1,5 @@ +@media (orientation: portrait) { + html { + height: 992px; + } +}
\ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index 1cdeb22..02bfead 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,35 +1,31 @@ -$colors: ( - primary: #00ADDC, - font: #999999 -); +$body-bg: transparent; +$body-color: #FFFFFF; +$list-group-bg: transparent; +$font-size-base: 1.5rem; +$input-bg: transparent; +$input-color: #FFFFFF; +@import "~bootstrap/scss/bootstrap"; @media (max-device-width: 720px) and (orientation: portrait) { - $header_size: 145px; - @import "main.scss"; @import "portrait.scss"; @import "720.scss"; } @media (max-device-width: 1280px) and (orientation: landscape) { - $header_size: 145px; - @import "main.scss"; @import "landscape.scss"; @import "720.scss"; } @media (min-device-width: 1080px) and (orientation: portrait) { - $header_size: 218px; - @import "main.scss"; @import "portrait.scss"; @import "1080.scss"; } -@media (min-device-width: 1920px) and (orientation: landscape) { - $header_size: 218px; - +@media (min-device-width: 1490px) and (orientation: landscape) { @import "main.scss"; @import "landscape.scss"; @import "1080.scss"; } +@import "~@fortawesome/fontawesome-free/css/all.min.css"; diff --git a/src/styles/main.scss b/src/styles/main.scss index 6861663..4cededc 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -24,56 +24,29 @@ html { } body { - font-size: 1.2rem; - font-family: Arial; - color: map-get($colors, font); - margin: 0 5%; - - .parent { + .list-group.scrollable { + height: 720px; + overflow: scroll; + } + .grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; - align-items: flex-start; + align-items: center; height: 100%; .item { - &:active { - .icon { - &.inactive { - display: none; - } - - &.enabled{ - display: block; - } - } - } - - color: map-get($colors, font); - text-decoration: none; + display: flex; + justify-content: center; - -webkit-animation-name: animation; - -webkit-animation-duration: 2s; + button { + width: 300px; + height: 300px; - .icon { - - &.inactive { - display: block; - } - - &.enabled{ - display: none; + .icon { + font-size: 7rem; } - - width: 70%; - margin: 5% 15%; - } - - .name { - width: 100%; - text-align: center; - text-transform: uppercase; } } } diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss index a4eb732..18ba52c 100644 --- a/src/styles/portrait.scss +++ b/src/styles/portrait.scss @@ -2,6 +2,9 @@ html { background-image: url('../images/vertical_background.png'); + background-position: top center; + background-repeat: no-repeat; + background-color: transparent; } body { |