diff --git a/html/main.html b/html/main.html index 99c27acb..834dd710 100644 --- a/html/main.html +++ b/html/main.html @@ -8,11 +8,11 @@
-
+
<%template "logo" .%>
-
+
@@ -42,4 +42,4 @@ <%template "extra-body" .%> -<%end%> \ No newline at end of file +<%end%> diff --git a/src/styles/color-pallete.html b/src/styles/color-pallete.html new file mode 100644 index 00000000..aa31808f --- /dev/null +++ b/src/styles/color-pallete.html @@ -0,0 +1,100 @@ + +CSS site color pallete + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ $background: #e5e5e5 + + $componentbg: #f5f5f5 + + $componentfg1: #262626 +
+ $componentfg2: rgba(0,0,0,.5) + + $componentfg3: rgba(0,0,0,.2) + + $componentfg4: #737373 +
+ $sidepanebg: white + + $bordercolor: #ccc + + $actioncolor1: rgb(132,184,25) +
+ $actioncolor2: rgb(0,149,52) + + none: #222 + + none: #db4f39 +
+ none: #84b819 + + none: rgba(0,0,0,.4) + + none: rgba(0,0,0,.3) +
diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss index 10b17f08..676c45bf 100644 --- a/src/styles/components/_bar.scss +++ b/src/styles/components/_bar.scss @@ -18,167 +18,170 @@ * along with this program. If not, see . * */ + #bar { --webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); -box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); -position: absolute; -top: 0; -left: 0; -right: 0; -min-height: 44px; -background-color: $componentbg; -color: $componentfg1; -font-size: 1em; -font-weight: bold; -line-height: 40px; -text-align: center; --webkit-touch-callout: none; --webkit-user-select: none; --khtml-user-select: none; --moz-user-select: none; --ms-user-select: none; -user-select: none; -z-index:5; -} -#bar > .left { -position: absolute; -left:0px; -top:0px; -bottom:0px; -padding-left:12px; -} -#bar .logo { -font-size:11px; -line-height:11px; -font-weight:normal; -color:black; -width:90px; -height:32px; -background-size:100%; -background-repeat:no-repeat; -background-image:url(../img/logo-small.png); -display:inline-block; -text-align:left; -} -#bar .logo > span { -position: relative; -left: 38px; -top: 26px; -font-style: italic; -} -#bar .logo > span a { -color:#222; -} -#bar > .right { -position: absolute; -right:0px; -top:1px; -bottom:1px; -padding-right:8px; -} -#bar > .left > *, #bar > .right > * { -vertical-align: middle; -} -#bar > .right .btn { -border-color:transparent; -background:transparent; -color:rgba(0,0,0,0.3); -height:42px; -width:42px; -display: inline-block; -font-size:24px; -padding:0px; -line-height:40px; -text-align:center; -margin-left:-4px; -} -#bar > .right .btn:focus { -border: none; -box-shadow: 0; -outline: none; -} -#bar > .right .btn:hover { -border-color: #ccc; -background-color:none; -color:rgba(0,0,0,0.4); -} -#bar > .right .btn.active { -border-color: #ccc; -background-color:none; -color:rgba(0,0,0,0.4); -} -#bar > .right .btn.active.amutebtn { -background-color: #db4f39; -border-color: #db4f39; -color: white; -} -#bar > .right .btn.active.aenablebtn { -background-color: #84b819; -border-color: #84b819; -color: white; -} -#bar .btn { -position:relative; + background-color: $componentbg; + color: $componentfg1; + left: 0; + min-height: 44px; + position: absolute; + right: 0; + top: 0; + text-align: center; + z-index: 5; + @include adjust-leading-to(2); + @include box-shadow(0 2px 10px 0 $componentfg3); + // @include debug-vertical-alignment(); + @include touch-callout(none); + @include user-select(none); + @include breakpt($breakpoint-medium) { + z-index: 40; + @include box-shadow(none); + } + .btn { + position: relative; + } } -#bar .badge { -background-color: #84b819; -font-size:.4em; -position:absolute; -right:0px; -top:2px; -border:1px solid white; -} -#bar .userpicture { -margin:-5px 0.5em 0px 0.5em; -width:46px; -height:46px; -border-radius:2px; -display:inline-block; -} -#bar > .middle { -z-index:5; -background-color: $componentbg; -display:inline-block; -padding:0 1em; -position:relative; -min-height: 44px; -vertical-align:middle; -margin-left:-70px; + +.bar-left { + bottom: 0; + left: 0; + top: 0; + padding-left: 12px; + position: absolute; + .logo { + background: url(../img/logo-small.png) no-repeat; + background-size: 100%; + display: inline-block; + color: black; + height: 32px; + text-align: left; + width: 90px; + vertical-align: middle; + @include adjust-font-size-to(11px,0.4); + span { + font-style: italic; + left: 38px; + position: relative; + top: 26px; + } + span a { + color: $dgrey; + } + } } -@media all and (max-width: 700px) { - #bar { - z-index:40; - -webkit-box-shadow: none; - box-shadow: none; +.bar-middle { + background-color: $componentbg; + display: inline-block; + font-weight: bold; + min-height: 44px; + padding: 0 1em; + position: relative; + margin-left: -70px; + z-index: 5; + @include breakpt($breakpoint-medium) { + display: block; + margin-left: 0px; + max-width: 40%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .userpicture { + border-radius: 2px; + display: inline-block; + height: 46px; + margin: -5px .5em 0 .5em; + width: 46px; + } + img { + @include breakpt($breakpoint-medium) { + display: none; } - #bar > .middle.status-connecting, #bar > .middle.status-closed, #bar > .middle.status-reconnecting, #bar > .middle.status-error, #bar > .middle.status-ringing { - max-width:100%; - border-bottom:1px solid $bordercolor; - .actions { - display: block; - padding:.2em 0 .8em 0; - } - min-height: 45px; + } + &.status-connected, + &.status-conference { + @include breakpt($breakpoint-medium) { + max-width: 100%; + left: 0; + position: absolute; + right: 0; } - #bar > .middle.status-connected, #bar > .middle.status-conference { - position:absolute; - left:0px; - right:0px; - max-width:100%; + } + &.status-connecting, + &.status-closed, + &.status-reconnecting, + &.status-error, + &.status-ringing { + @include breakpt($breakpoint-medium) { + border-bottom: 1px solid $bordercolor; + max-width: 100%; + min-height: 45px; } - #bar > .middle { - display:block; - max-width:40%; - overflow:hidden; - text-overflow:ellipsis; - white-space:nowrap; - margin-left:0px; - - img { - display:none; - } + } + // TODO(theurere): cleanup + &.status-connecting .actions, + &.status-closed .actions, + &.status-reconnecting .actions, + &.status-error .actions, + &.status-ringing .actions { + @include breakpt($breakpoint-medium) { + display: block; + padding: .2em 0 .8em 0; } - + } } +.bar-right { + bottom: 1px; + padding-right: 8px; + position: absolute; + right: 0; + top: 1px; + .badge { + background-color: $actioncolor1; + border: 1px solid white; + font-size: .4em; + position: absolute; + right: 0; + top: 2px; + } + .btn { + background: transparent; + border-color: transparent; + color: $grey3; + display: inline-block; + height: 42px; + margin-left: -4px; + padding: 0; + text-align: center; + width: 42px; + @include adjust-font-size-to(24px); + &:focus { + border: none; + outline: none; + @include box-shadow(0); + } + &:hover { + background-color: none; + border-color: #ccc; + color: $grey4; + } + &.active { + background-color: none; + border-color: #ccc; + color: $grey4; + } + &.active.amutebtn { + background-color: $red; + border-color: $red; + color: white; + } + &.active.aenablebtn { + background-color: $actioncolor1; + border-color: $actioncolor1; + color: white; + } + } +} diff --git a/src/styles/global/_base.scss b/src/styles/global/_base.scss index 38e493e0..1a6a39ca 100644 --- a/src/styles/global/_base.scss +++ b/src/styles/global/_base.scss @@ -18,11 +18,14 @@ * along with this program. If not, see . * */ + +@include establish-baseline(); + html, body { background-color: $background; background-clip: padding-box; height: 100%; -font: normal 13px "Helvetica Neue",Helvetica,Arial,sans-serif; +font: normal $base-font-size $font-sans-serif; } body { margin: 0; @@ -125,4 +128,4 @@ z-index:0; text-shadow: 0 0 5px black; font-size:1.1em; margin-top:80px; -} \ No newline at end of file +} diff --git a/src/styles/global/_mixins.scss b/src/styles/global/_mixins.scss new file mode 100644 index 00000000..ff34e400 --- /dev/null +++ b/src/styles/global/_mixins.scss @@ -0,0 +1,23 @@ + +@mixin breakpt($pt) { + @media (max-width: $pt) { + @content; + } +} + +@mixin user-select($select) { + -khtml-user-select: $select; + -moz-user-select: $select; + -ms-user-select: $select; + -webkit-user-select: $select; + user-select: $select; +} + +@mixin touch-callout($callout) { + -webkit-touch-callout: $callout; +} + +@mixin box-shadow($shadow) { + -webkit-box-shadow: $shadow; + box-shadow: $shadow; +} diff --git a/src/styles/global/_colors.scss b/src/styles/global/_variables.scss similarity index 75% rename from src/styles/global/_colors.scss rename to src/styles/global/_variables.scss index d19e2208..bf66a04d 100644 --- a/src/styles/global/_colors.scss +++ b/src/styles/global/_variables.scss @@ -22,10 +22,22 @@ $background: #e5e5e5; $componentbg: #f5f5f5; $componentfg1: #262626; $componentfg2: rgba(0,0,0,.5); -$componentfg3: rgba(0,0,0,.2); +$componentfg3: rgba(0,0,0,.2); //#ccc $componentfg4: #737373; $sidepanebg: white; $bordercolor: #ccc; $actioncolor1: rgb(132,184,25); $actioncolor2: rgb(0,149,52); +$grey3: rgba(0,0,0,.3); +$grey4: rgba(0,0,0,.4); +$dgrey: rgb(34,34,34); +$red: rgb(219,79,57); + +$breakpoint-small: 480px; +$breakpoint-medium: 700px; +$breakpoint-large: 1280px; + +$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif; +$base-font-size: 13px; +$base-line-height: 19px; diff --git a/src/styles/main.scss b/src/styles/main.scss index 688ab7f4..945664ac 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -19,11 +19,13 @@ * */ +@import "global/variables"; +// @import "compass"; @import "compass"; @import "libs/libs"; -@import "global/colors"; +@import "global/mixins"; @import "global/base"; @import "global/angular"; diff --git a/static/partials/statusmessage.html b/static/partials/statusmessage.html index bddddd86..1216daf4 100644 --- a/static/partials/statusmessage.html +++ b/static/partials/statusmessage.html @@ -1,4 +1,4 @@ - + {{_("Initializing")}} {{_("Online")}} {{id|displayName}} {{_("Calling")}} {{dialing|displayName}} {{_("Hangup")}}