From 15fcafa2f5babf9ec6ac53302c4cdc8e4c2af5ae Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 29 Aug 2018 22:13:09 +1200 Subject: [PATCH] Use SVGs for buttons --- .../system/html/css/img/mt-bubble-a-hover.svg | 5 ++ .../html/css/img/mt-bubble-a-normal.svg | 5 ++ .../system/html/css/img/mt-bubble-i-hover.svg | 5 ++ .../html/css/img/mt-bubble-i-normal.svg | 5 ++ .../system/html/css/img/mt-expand-hover.svg | 31 +++++++ .../system/html/css/img/mt-expand-normal.svg | 31 +++++++ scripts/system/html/css/img/mt-mute-hover.svg | 5 ++ .../system/html/css/img/mt-mute-normal.svg | 5 ++ scripts/system/html/css/miniTablet.css | 82 +++++++++---------- scripts/system/html/miniTablet.html | 2 +- 10 files changed, 134 insertions(+), 42 deletions(-) create mode 100644 scripts/system/html/css/img/mt-bubble-a-hover.svg create mode 100644 scripts/system/html/css/img/mt-bubble-a-normal.svg create mode 100644 scripts/system/html/css/img/mt-bubble-i-hover.svg create mode 100644 scripts/system/html/css/img/mt-bubble-i-normal.svg create mode 100644 scripts/system/html/css/img/mt-expand-hover.svg create mode 100644 scripts/system/html/css/img/mt-expand-normal.svg create mode 100644 scripts/system/html/css/img/mt-mute-hover.svg create mode 100644 scripts/system/html/css/img/mt-mute-normal.svg diff --git a/scripts/system/html/css/img/mt-bubble-a-hover.svg b/scripts/system/html/css/img/mt-bubble-a-hover.svg new file mode 100644 index 0000000000..36abbf5c34 --- /dev/null +++ b/scripts/system/html/css/img/mt-bubble-a-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/system/html/css/img/mt-bubble-a-normal.svg b/scripts/system/html/css/img/mt-bubble-a-normal.svg new file mode 100644 index 0000000000..e6e8021bf5 --- /dev/null +++ b/scripts/system/html/css/img/mt-bubble-a-normal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/system/html/css/img/mt-bubble-i-hover.svg b/scripts/system/html/css/img/mt-bubble-i-hover.svg new file mode 100644 index 0000000000..e39dff3888 --- /dev/null +++ b/scripts/system/html/css/img/mt-bubble-i-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/system/html/css/img/mt-bubble-i-normal.svg b/scripts/system/html/css/img/mt-bubble-i-normal.svg new file mode 100644 index 0000000000..ef2591ba16 --- /dev/null +++ b/scripts/system/html/css/img/mt-bubble-i-normal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/system/html/css/img/mt-expand-hover.svg b/scripts/system/html/css/img/mt-expand-hover.svg new file mode 100644 index 0000000000..eea3487bd8 --- /dev/null +++ b/scripts/system/html/css/img/mt-expand-hover.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scripts/system/html/css/img/mt-expand-normal.svg b/scripts/system/html/css/img/mt-expand-normal.svg new file mode 100644 index 0000000000..7b5b59a7c9 --- /dev/null +++ b/scripts/system/html/css/img/mt-expand-normal.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scripts/system/html/css/img/mt-mute-hover.svg b/scripts/system/html/css/img/mt-mute-hover.svg new file mode 100644 index 0000000000..59c38ca5a0 --- /dev/null +++ b/scripts/system/html/css/img/mt-mute-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/system/html/css/img/mt-mute-normal.svg b/scripts/system/html/css/img/mt-mute-normal.svg new file mode 100644 index 0000000000..1f25bce9c6 --- /dev/null +++ b/scripts/system/html/css/img/mt-mute-normal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/system/html/css/miniTablet.css b/scripts/system/html/css/miniTablet.css index 35a8354750..e633f93664 100644 --- a/scripts/system/html/css/miniTablet.css +++ b/scripts/system/html/css/miniTablet.css @@ -8,14 +8,6 @@ Distributed under the Apache License, Version 2.0. See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html */ -@font-face { - font-family: HiFi-Glyphs; - src: url(../../../../resources/fonts/hifi-glyphs.ttf), - url(../../../../fonts/hifi-glyphs.ttf), - url(../../../../interface/resources/fonts/hifi-glyphs.ttf), - url(../fonts/hifi-glyphs.ttf); -} - * { box-sizing: border-box; padding: 0; @@ -37,34 +29,14 @@ section { padding: 13px; } -section .button { +.button { width: 100%; height: 90px; - background-color: #252525; margin-top: 10px; text-align: center; - border-radius: 8px; } - section .button.off { - border: 2px solid #6a6a6a; - background-color: #303030; - } - - section .button.off:hover { - border: 2px solid #1fc6a6; - } - - section .button.on { - border: 2px solid #1fc6a6; - background-color: #1fc6a6; - } - - section .button.on:hover { - border: 2px solid #e3e3e3; - } - - section .button:first-child { + .button:first-child { margin-top: 0; } @@ -74,28 +46,56 @@ img { #mute { padding-top: 19px; + background-size: 100% 100%; } + #mute.off { + background-image: url("./img/mt-mute-normal.svg"); + } + + #mute.off:hover { + background-image: url("./img/mt-mute-hover.svg"); + } + #bubble { padding-top: 19px; + background-size: 100% 100%; } + #bubble.off { + background-image: url("./img/mt-bubble-i-normal.svg"); + } + + #bubble.off:hover { + background-image: url("./img/mt-bubble-i-hover.svg"); + } + + #bubble.on { + background-image: url("./img/mt-bubble-a-normal.svg"); + } + + #bubble.on:hover { + background-image: url("./img/mt-bubble-a-hover.svg"); + } + + #bubble img { + position: relative; + left: -2px; + } + #expand { position: absolute; - right: 13px; + right: 14px; bottom: 13px; width: 40px; height: 40px; - border-radius: 20px; + background-size: 100% 100%; } - #expand span { - display: inline-block; - transform: rotate(45deg); - position: relative; - left: 0; - top: 5px; - font-family: hifi-glyphs; - font-size: 24px; - color: #ffffff; + #expand.off { + background-image: url("./img/mt-expand-normal.svg"); } + + #expand.off:hover { + background-image: url("./img/mt-expand-hover.svg"); + } diff --git a/scripts/system/html/miniTablet.html b/scripts/system/html/miniTablet.html index 1f18228987..4b3129fca9 100644 --- a/scripts/system/html/miniTablet.html +++ b/scripts/system/html/miniTablet.html @@ -23,7 +23,7 @@ See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.
-
`
+