diff --git a/html/main.html b/html/main.html index 99c27acb..54dad972 100644 --- a/html/main.html +++ b/html/main.html @@ -8,16 +8,18 @@
-
- <%template "logo" .%> -
- -
- - - - - +
+
+ <%template "logo" .%> +
+ +
+ + + + + +
@@ -42,4 +44,4 @@ <%template "extra-body" .%> -<%end%> \ No newline at end of file +<%end%> diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss index e68caede..c4b97a61 100644 --- a/src/styles/components/_bar.scss +++ b/src/styles/components/_bar.scss @@ -20,109 +20,78 @@ */ #bar { - background-color: $componentbg; - color: $componentfg1; - font: bold 1em/40px $font-sans-serif; left: 0; min-height: 44px; position: absolute; right: 0; top: 0; - text-align: center; z-index: 5; +} + +.bar { + background-color: $componentbg; + color: $componentfg1; + font: bold 1em/40px $font-sans-serif; + text-align: center; + // @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); - > .left { - bottom: 0; - left: 0; - top: 0; - padding-left: 12px; - position: absolute; - // TODO(theurere): cleanup - > *, #bar > .right > * { - vertical-align: middle; - } + @include breakpt($breakpoint-medium) { + z-index: 40; + @include box-shadow(none); } + .btn { + position: relative; + } +} + +.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; - font: normal 11px/11px $font-sans-serif; height: 32px; + font: normal 11px/11px $font-sans-serif; text-align: left; width: 90px; - > span { + vertical-align: middle; + // @include adjust-font-size-to(11px,0.4); + span { font-style: italic; left: 38px; position: relative; top: 26px; } - > span a { + span a { color: $dgrey; } } } -#bar { - > .right { - bottom: 1px; - padding-right: 8px; - position: absolute; - right: 0; - top: 1px; - .btn { - background: transparent; - border-color: transparent; - color: $grey3; - display: inline-block; - font: 24px/40px $font-sans-serif; - height: 42px; - margin-left: -4px; - padding: 0; - text-align: center; - width: 42px; - } - .btn:focus { - border: none; - @include box-shadow(0); - outline: none; - } - .btn:hover { - background-color: none; - border-color: #ccc; - color: $grey4; - } - .btn.active { - background-color: none; - border-color: #ccc; - color: $grey4; - } - .btn.active.amutebtn { - background-color: $red; - border-color: $red; - color: white; - } - .btn.active.aenablebtn { - background-color: $actioncolor1; - border-color: $actioncolor1; - color: white; - } - } -} - -#bar { - .btn { - position: relative; - } - .badge { - background-color: $actioncolor1; - border: 1px solid white; - font-size: .4em; - position: absolute; - right: 0; - top: 2px; +.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; @@ -131,38 +100,13 @@ margin: -5px .5em 0 .5em; width: 46px; } - > .middle { - background-color: $componentbg; - display: inline-block; - min-height: 44px; - padding: 0 1em; - position: relative; - margin-left: -70px; - vertical-align: middle; - z-index: 5; - @include breakpt($breakpoint-medium) { - display: block; - margin-left: 0px; - max-width: 40%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } -} - -#bar { - @include breakpt($breakpoint-medium) { - z-index: 40; - @include box-shadow(none); - } - > .middle img { + img { @include breakpt($breakpoint-medium) { display: none; } } - > .middle.status-connected, - > .middle.status-conference { + &.status-connected, + &.status-conference { @include breakpt($breakpoint-medium) { max-width: 100%; left: 0; @@ -170,11 +114,11 @@ right: 0; } } - > .middle.status-connecting, - > .middle.status-closed, - > .middle.status-reconnecting, - > .middle.status-error, - > .middle.status-ringing { + &.status-connecting, + &.status-closed, + &.status-reconnecting, + &.status-error, + &.status-ringing { @include breakpt($breakpoint-medium) { border-bottom: 1px solid $bordercolor; max-width: 100%; @@ -182,14 +126,68 @@ } } // TODO(theurere): cleanup - > .middle.status-connecting .actions, - > .middle.status-closed .actions, - > .middle.status-reconnecting .actions, - > .middle.status-error .actions, - > .middle.status-ringing .actions { + &.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; + font: 24px/40px $font-sans-serif; + 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 811cb5e3..6bc06e9d 100644 --- a/src/styles/global/_base.scss +++ b/src/styles/global/_base.scss @@ -18,110 +18,119 @@ * along with this program. If not, see . * */ -html, body { -background-clip: padding-box; -height: 100%; -font: normal $base-font-size $font-sans-serif; + +html, +body { + background-clip: padding-box; + background-color: $background; + height: 100%; + font: normal $base-font-size $font-sans-serif; + // @include debug-vertical-alignment(); } + body { -margin: 0; -padding: 0; -overflow:hidden; -max-width:100%; -max-height:100%; + margin: 0; + max-height: 100%; + max-width: 100%; + overflow: hidden; + padding: 0; } + a { -cursor:pointer; + cursor: pointer; } + #details { -position:fixed; -bottom:0px; -right:0px; -font-size:10px; -z-index:999; -background: white; -padding:4px; -display:none; + background: white; + bottom: 0; + display: none; + font-size: 10px; + padding: 4px; + position: fixed; + right: 0; + z-index: 999; } -.mainview { -position:absolute; -left:150px; -top:45px; -right:0px; -bottom:0px; -display:none; + +.withChat, +.withBuddylist { + .mainview { + right: 260px; + } } -.withChat .mainview, .withBuddylist .mainview { -right:260px; + +.withBuddylist { + &.withChat .mainview { + right: 520px; + } } -.withBuddylist.withChat .mainview { -right:520px; + +.mainview { + bottom: 0; + display: none; + left: 150px; + position: absolute; + right: 0; + top: 45px; } + #background { -position:fixed; -left:0px; -right:0px; -top:0px; -bottom:0px; -background-image: url("../img/bg-tiles.png"); -background-repeat: repeat; -z-index:0; - @include hidpi { - background-image: url("../img/bg-tiles_x2.png"); - background-size: 198px 200px; - } + background: url("../img/bg-tiles.png") repeat; + bottom: 0; + left: 0; + position:fixed; + right: 0; + top: 0; + z-index: 0; + @include hidpi { + background-image: url("../img/bg-tiles_x2.png"); + background-size: 198px 200px; + } } + #loader { - background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjMuMSByOTg4NiIKICAgd2lkdGg9IjEzNy4wMDA0OSIKICAgaGVpZ2h0PSIxMjYuNSIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ic3ByZWVkV2F2ZXMuc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9Ii9ob21lL2RvbWFpbi9sb25nc2xlZXAvRGVza3RvcC9zcHJlZWRpby9zcHJlZWRfd2F2ZXNfYmlnLnBuZyIKICAgaW5rc2NhcGU6ZXhwb3J0LXhkcGk9IjM5NC4xNiIKICAgaW5rc2NhcGU6ZXhwb3J0LXlkcGk9IjM5NC4xNiI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhOCI+PHJkZjpSREY+PGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48ZGM6dGl0bGUgLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgICBpZD0iZGVmczYiPjxjbGlwUGF0aAogICBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgaWQ9ImNsaXBQYXRoMTgiPjxwYXRoCiAgICAgZD0ibSAwLDAgNTI0NCwwIDAsMTg3MC44NyAtNTI0NCwwIEwgMCwwIHoiCiAgICAgaWQ9InBhdGgyMCIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvY2xpcFBhdGg+CjwvZGVmcz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEyNjUiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzUyIgogICAgIGlkPSJuYW1lZHZpZXc0IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBzaG93Z3VpZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiCiAgICAgYm9yZGVybGF5ZXI9ImZhbHNlIgogICAgIHNob3dib3JkZXI9InRydWUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9InRydWUiCiAgICAgaW5rc2NhcGU6em9vbT0iMiIKICAgICBpbmtzY2FwZTpjeD0iMTI2Ljc4NDk3IgogICAgIGlua3NjYXBlOmN5PSI4LjQyNzQzMDQiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ijg5NyIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzY3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIyIgogICAgIGlua3NjYXBlOnNuYXAtZnJvbS1ndWlkZT0idHJ1ZSI+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iMC4wMDAzMjM1OTEzNiwtMTA4LjUwMzgyIgogICAgICAgb3JpZW50YXRpb249IjAsODU1LjUxMDAxIgogICAgICAgaWQ9Imd1aWRlMzgwMSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSI4NTUuNTEwMzQsLTEwOC41MDM4MiIKICAgICAgIG9yaWVudGF0aW9uPSItMjMzLjg2MjUsMCIKICAgICAgIGlkPSJndWlkZTM4MDMiIC8+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iLTYuNSwxMjYuNSIKICAgICAgIG9yaWVudGF0aW9uPSIwLC04NTUuNTEwMDEiCiAgICAgICBpZD0iZ3VpZGUzODA1IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249IjAuMDAwMzIzNTkxMzYsMTI1LjM1ODY3IgogICAgICAgb3JpZW50YXRpb249IjIzMy44NjI1LDAiCiAgICAgICBpZD0iZ3VpZGUzODA3IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgb3JpZW50YXRpb249IjAsMSIKICAgICAgIHBvc2l0aW9uPSItOS41LC0zLjA1MTc1NzhlLTA2IgogICAgICAgaWQ9Imd1aWRlMzgxNSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSIxLDAiCiAgICAgICBwb3NpdGlvbj0iMTQ2LjUwMDQ5LDEyNS4zNTg2NyIKICAgICAgIGlkPSJndWlkZTQ1NjEiIC8+PC9zb2RpcG9kaTpuYW1lZHZpZXc+PGcKICAgICBpZD0iZzEwIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9IndhdmVzIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDMuMjM1OTEzNmUtNCwyMzUuMDAzODMpIgogICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZSI+PGcKICAgdHJhbnNmb3JtPSJtYXRyaXgoMC4xLDAsMCwwLjEsLTguNDAwMzksMzAuNjY3MDAzKSIKICAgaWQ9ImcxNiIKICAgY2xpcC1wYXRoPSJ1cmwoI2NsaXBQYXRoMTgpIj48cGF0aAogICAgIGQ9Im0gNjY3LjQzNCwxNDI3LjIzIGMgNS42MjUsNDAuMzIgNTAsMTA1IDEzMS4yNSwxMDUgODEuMjUsMCAyNjMuNzUsMCAyOTIuNDk2LDAgMjguNzUsMCA2Mi41LC02LjI1IDgzLjc1LDQwIC0xLjI1LC0zMCAtOC43NSwtMTMwIC0xMS4yNSwtMTQ2LjI1IC0yLjUsLTE2LjI1IC0yMi41LC0xMzcuNSAtMTM2LjI0NiwtMTM4Ljc1IC0xMTMuNzUsMCAtMjk3LjUsMCAtMjk3LjUsMCAwLDAgLTU4Ljc1LDYuODggLTg4LjQzOCwtNDYuMjUgLTAuMTkxLC0wLjM5IDIwLjkzOCwxNTIuNSAyNS45MzgsMTg2LjI1IgogICAgIHN0eWxlPSJmaWxsOiMwMDk1MzQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgaWQ9InBhdGgyMiIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjxwYXRoCiAgICAgZD0ibSAxMzUuNzg1Miw5MzkuMzk4IGMgMTEuMjMwNCw4MS40OTMgOTkuODIzOCwyMTIuMjcgMjYyLjAzNDgsMjEyLjI3IDE2Mi4yMTUsMCA1MjYuNTcxLDAgNTgzLjk2OSwwIDU3LjM5OSwwIDEyNC43ODEsLTEyLjYzNyAxNjcuMjAxLDgwLjg2MiAtMi40OSwtNjAuNjQ3IC0xNy40NywtMjYyLjgxMSAtMjIuNDYsLTI5NS42NTkgLTQuOTksLTMyLjg1MSAtNDQuOTIsLTI3Ny45NzMgLTI3Mi4wMTQsLTI4MC41IC0yMjcuMDk4LDAgLTU5My45NSwwIC01OTMuOTUsMCAwLDAgLTExOC45ODc5LDEzLjA5OCAtMTc2LjU2MjEsLTkzLjUgLTAuMzgyOCwtMC44MDEgNDEuODAwOCwzMDguMzAxIDUxLjc4MTMsMzc2LjUyNyIKICAgICBzdHlsZT0iZmlsbDojODRiODE5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgIGlkPSJwYXRoMjQiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PHRleHQKICAgdHJhbnNmb3JtPSJzY2FsZSgxLC0xKSIKICAgc29kaXBvZGk6bGluZXNwYWNpbmc9IjEyNSUiCiAgIGlkPSJ0ZXh0MzAxMyIKICAgeT0iLTg3LjE5OTk5NyIKICAgeD0iNTgwIgogICBzdHlsZT0iZm9udC1zaXplOjkuNjAwMDAwMzhweDtmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7bGluZS1oZWlnaHQ6MTI1JTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7Zm9udC1mYW1pbHk6Qml0c3RyZWFtIFZlcmEgU2FucyIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHRzcGFuCiAgICAgeT0iLTg3LjE5OTk5NyIKICAgICB4PSI1ODAiCiAgICAgaWQ9InRzcGFuMzAxNSIKICAgICBzb2RpcG9kaTpyb2xlPSJsaW5lIiAvPjwvdGV4dD4KCjxnCiAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgIGlkPSJsYXllcjIiCiAgIGlua3NjYXBlOmxhYmVsPSJtYXNrIgogICBzdHlsZT0iZGlzcGxheTppbmxpbmUiIC8+PC9nPjwvc3ZnPg=="); - background-size:contain; - background-repeat:no-repeat; - background-position:center; - position:fixed; - left:15%; - top:15%; - bottom:15%; - right:15%; - max-width:200px; - max-height:150px; - margin:auto; - z-index:20000; - opacity:1; - transition-property: opacity; - -webkit-transition-property: opacity; - transition-duration: 0.5s; - -webkit-transition-duration: 0.5s; - pointer-events:none; - opacity:1; -} -#loader > div { - display:block; - position:absolute; - top:50%; - left:0px; - right:0px; - margin:0 auto; - font-size:3em; - text-align:center; - color:#ddd; -} -#loader.done { - opacity:0; + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjMuMSByOTg4NiIKICAgd2lkdGg9IjEzNy4wMDA0OSIKICAgaGVpZ2h0PSIxMjYuNSIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ic3ByZWVkV2F2ZXMuc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9Ii9ob21lL2RvbWFpbi9sb25nc2xlZXAvRGVza3RvcC9zcHJlZWRpby9zcHJlZWRfd2F2ZXNfYmlnLnBuZyIKICAgaW5rc2NhcGU6ZXhwb3J0LXhkcGk9IjM5NC4xNiIKICAgaW5rc2NhcGU6ZXhwb3J0LXlkcGk9IjM5NC4xNiI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhOCI+PHJkZjpSREY+PGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48ZGM6dGl0bGUgLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgICBpZD0iZGVmczYiPjxjbGlwUGF0aAogICBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgaWQ9ImNsaXBQYXRoMTgiPjxwYXRoCiAgICAgZD0ibSAwLDAgNTI0NCwwIDAsMTg3MC44NyAtNTI0NCwwIEwgMCwwIHoiCiAgICAgaWQ9InBhdGgyMCIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvY2xpcFBhdGg+CjwvZGVmcz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEyNjUiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzUyIgogICAgIGlkPSJuYW1lZHZpZXc0IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBzaG93Z3VpZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiCiAgICAgYm9yZGVybGF5ZXI9ImZhbHNlIgogICAgIHNob3dib3JkZXI9InRydWUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9InRydWUiCiAgICAgaW5rc2NhcGU6em9vbT0iMiIKICAgICBpbmtzY2FwZTpjeD0iMTI2Ljc4NDk3IgogICAgIGlua3NjYXBlOmN5PSI4LjQyNzQzMDQiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ijg5NyIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzY3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIyIgogICAgIGlua3NjYXBlOnNuYXAtZnJvbS1ndWlkZT0idHJ1ZSI+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iMC4wMDAzMjM1OTEzNiwtMTA4LjUwMzgyIgogICAgICAgb3JpZW50YXRpb249IjAsODU1LjUxMDAxIgogICAgICAgaWQ9Imd1aWRlMzgwMSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSI4NTUuNTEwMzQsLTEwOC41MDM4MiIKICAgICAgIG9yaWVudGF0aW9uPSItMjMzLjg2MjUsMCIKICAgICAgIGlkPSJndWlkZTM4MDMiIC8+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iLTYuNSwxMjYuNSIKICAgICAgIG9yaWVudGF0aW9uPSIwLC04NTUuNTEwMDEiCiAgICAgICBpZD0iZ3VpZGUzODA1IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249IjAuMDAwMzIzNTkxMzYsMTI1LjM1ODY3IgogICAgICAgb3JpZW50YXRpb249IjIzMy44NjI1LDAiCiAgICAgICBpZD0iZ3VpZGUzODA3IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgb3JpZW50YXRpb249IjAsMSIKICAgICAgIHBvc2l0aW9uPSItOS41LC0zLjA1MTc1NzhlLTA2IgogICAgICAgaWQ9Imd1aWRlMzgxNSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSIxLDAiCiAgICAgICBwb3NpdGlvbj0iMTQ2LjUwMDQ5LDEyNS4zNTg2NyIKICAgICAgIGlkPSJndWlkZTQ1NjEiIC8+PC9zb2RpcG9kaTpuYW1lZHZpZXc+PGcKICAgICBpZD0iZzEwIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9IndhdmVzIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDMuMjM1OTEzNmUtNCwyMzUuMDAzODMpIgogICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZSI+PGcKICAgdHJhbnNmb3JtPSJtYXRyaXgoMC4xLDAsMCwwLjEsLTguNDAwMzksMzAuNjY3MDAzKSIKICAgaWQ9ImcxNiIKICAgY2xpcC1wYXRoPSJ1cmwoI2NsaXBQYXRoMTgpIj48cGF0aAogICAgIGQ9Im0gNjY3LjQzNCwxNDI3LjIzIGMgNS42MjUsNDAuMzIgNTAsMTA1IDEzMS4yNSwxMDUgODEuMjUsMCAyNjMuNzUsMCAyOTIuNDk2LDAgMjguNzUsMCA2Mi41LC02LjI1IDgzLjc1LDQwIC0xLjI1LC0zMCAtOC43NSwtMTMwIC0xMS4yNSwtMTQ2LjI1IC0yLjUsLTE2LjI1IC0yMi41LC0xMzcuNSAtMTM2LjI0NiwtMTM4Ljc1IC0xMTMuNzUsMCAtMjk3LjUsMCAtMjk3LjUsMCAwLDAgLTU4Ljc1LDYuODggLTg4LjQzOCwtNDYuMjUgLTAuMTkxLC0wLjM5IDIwLjkzOCwxNTIuNSAyNS45MzgsMTg2LjI1IgogICAgIHN0eWxlPSJmaWxsOiMwMDk1MzQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgaWQ9InBhdGgyMiIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjxwYXRoCiAgICAgZD0ibSAxMzUuNzg1Miw5MzkuMzk4IGMgMTEuMjMwNCw4MS40OTMgOTkuODIzOCwyMTIuMjcgMjYyLjAzNDgsMjEyLjI3IDE2Mi4yMTUsMCA1MjYuNTcxLDAgNTgzLjk2OSwwIDU3LjM5OSwwIDEyNC43ODEsLTEyLjYzNyAxNjcuMjAxLDgwLjg2MiAtMi40OSwtNjAuNjQ3IC0xNy40NywtMjYyLjgxMSAtMjIuNDYsLTI5NS42NTkgLTQuOTksLTMyLjg1MSAtNDQuOTIsLTI3Ny45NzMgLTI3Mi4wMTQsLTI4MC41IC0yMjcuMDk4LDAgLTU5My45NSwwIC01OTMuOTUsMCAwLDAgLTExOC45ODc5LDEzLjA5OCAtMTc2LjU2MjEsLTkzLjUgLTAuMzgyOCwtMC44MDEgNDEuODAwOCwzMDguMzAxIDUxLjc4MTMsMzc2LjUyNyIKICAgICBzdHlsZT0iZmlsbDojODRiODE5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgIGlkPSJwYXRoMjQiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PHRleHQKICAgdHJhbnNmb3JtPSJzY2FsZSgxLC0xKSIKICAgc29kaXBvZGk6bGluZXNwYWNpbmc9IjEyNSUiCiAgIGlkPSJ0ZXh0MzAxMyIKICAgeT0iLTg3LjE5OTk5NyIKICAgeD0iNTgwIgogICBzdHlsZT0iZm9udC1zaXplOjkuNjAwMDAwMzhweDtmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7bGluZS1oZWlnaHQ6MTI1JTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7Zm9udC1mYW1pbHk6Qml0c3RyZWFtIFZlcmEgU2FucyIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHRzcGFuCiAgICAgeT0iLTg3LjE5OTk5NyIKICAgICB4PSI1ODAiCiAgICAgaWQ9InRzcGFuMzAxNSIKICAgICBzb2RpcG9kaTpyb2xlPSJsaW5lIiAvPjwvdGV4dD4KCjxnCiAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgIGlkPSJsYXllcjIiCiAgIGlua3NjYXBlOmxhYmVsPSJtYXNrIgogICBzdHlsZT0iZGlzcGxheTppbmxpbmUiIC8+PC9nPjwvc3ZnPg==") no-repeat center; + background-size: contain; + bottom: 15%; + left: 15%; + max-width: 200px; + max-height: 150px; + margin: auto; + opacity: 1; + pointer-events: none; + position: fixed; + right: 15%; + top: 15%; + z-index: 20000; + @include transition-property(opacity); + @include transition-duration(.5s); + div { + color: $lighter-text; + display: block; + font-size: 3em; + left: 0; + margin: 0 auto; + right: 0; + position: absolute; + top: 50%; + text-align: center; + } + &.done { + opacity: 0; + } } + #page { - position:absolute; - top:44px; - bottom:0px; - left:0px; - right:0px; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 44px; + @include user-select(none); } + .welcome { - color:#aaa; - text-shadow: 0 0 5px black; - font-size:1.1em; - margin-top:80px; + color: $light-text; + font-size: 1.1em; + margin-top: 80px; + text-shadow: 0 0 5px black; } diff --git a/src/styles/global/_mixins.scss b/src/styles/global/_mixins.scss index ff34e400..44a8e4e7 100644 --- a/src/styles/global/_mixins.scss +++ b/src/styles/global/_mixins.scss @@ -9,6 +9,7 @@ -khtml-user-select: $select; -moz-user-select: $select; -ms-user-select: $select; + -o-user-select: $select; -webkit-user-select: $select; user-select: $select; } @@ -21,3 +22,36 @@ -webkit-box-shadow: $shadow; box-shadow: $shadow; } + +@mixin transition-property($property) { + transition-property: $property; + -webkit-transition-property: $property; +} + +@mixin transition-duration($duration) { + transition-duration: $duration; + -webkit-transition-duration: $duration; +} + +@mixin transition($transition) { + transition: $transition; + -moz-transition: $transition; + -o-transition: $transition; + -webkit-transition: $transition; +} + +@mixin border-radius($radius) { + border-radius: $radius; + -moz-border-radius: $radius; + -webkit-border-radius: $radius; +} + +@mixin linear-gradient($gradient...) { + background: #9dd53a; /* Old browsers */ + background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ + background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */ + background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */ +} diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss index a4774256..1b12ade1 100644 --- a/src/styles/global/_variables.scss +++ b/src/styles/global/_variables.scss @@ -29,6 +29,9 @@ $bordercolor: #ccc; $actioncolor1: rgb(132,184,25); $actioncolor2: rgb(0,149,52); +$light-text: #aaa; +$lighter-text: #ddd; + $grey3: rgba(0,0,0,.3); $grey4: rgba(0,0,0,.4); $dgrey: rgb(34,34,34); @@ -40,3 +43,6 @@ $breakpoint-large: 1280px; $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif; $base-font-size: 13px; +$base-line-height: 19px; + +$audiovideolevel: $actioncolor1; diff --git a/static/css/bootstrap.min.css b/static/css/bootstrap.min.css index a9899067..98dee739 100644 --- a/static/css/bootstrap.min.css +++ b/static/css/bootstrap.min.css @@ -1,3 +1,23 @@ +/* + * Spreed Speak Freely. + * Copyright (C) 2013-2014 struktur AG + * + * This file is part of Spreed Speak Freely. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ /* * Bootstrap v3.1.1 (http://getbootstrap.com) * Copyright 2011-2014 Twitter, Inc. @@ -269,10 +289,10 @@ html { body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; + font-size: 14px; line-height: 1.42857; color: #333333; - background-color: #e5e5e5; } + background-color: white; } input, button, @@ -310,7 +330,7 @@ img { .img-thumbnail { padding: 4px; line-height: 1.42857; - background-color: #e5e5e5; + background-color: white; border: 1px solid #dddddd; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; @@ -323,8 +343,8 @@ img { border-radius: 50%; } hr { - margin-top: 18px; - margin-bottom: 18px; + margin-top: 20px; + margin-bottom: 20px; border: 0; border-top: 1px solid #eeeeee; } @@ -365,8 +385,8 @@ h1, h2, h3, h4, h5, h6, h1, .h1, h2, .h2, h3, .h3 { - margin-top: 18px; - margin-bottom: 9px; } + margin-top: 20px; + margin-bottom: 10px; } h1 small, h1 .small, .h1 small, .h1 .small, @@ -381,8 +401,8 @@ h3, .h3 { h4, .h4, h5, .h5, h6, .h6 { - margin-top: 9px; - margin-bottom: 9px; } + margin-top: 10px; + margin-bottom: 10px; } h4 small, h4 .small, .h4 small, .h4 .small, @@ -395,34 +415,34 @@ h6, .h6 { font-size: 75%; } h1, .h1 { - font-size: 33px; } + font-size: 36px; } h2, .h2 { - font-size: 27px; } + font-size: 30px; } h3, .h3 { - font-size: 23px; } + font-size: 24px; } h4, .h4 { - font-size: 17px; } + font-size: 18px; } h5, .h5 { - font-size: 13px; } + font-size: 14px; } h6, .h6 { font-size: 12px; } p { - margin: 0 0 9px; } + margin: 0 0 10px; } .lead { - margin-bottom: 18px; - font-size: 14px; + margin-bottom: 20px; + font-size: 16px; font-weight: 200; line-height: 1.4; } @media (min-width: 768px) { .lead { - font-size: 19.5px; } } + font-size: 21px; } } small, .small { @@ -510,14 +530,14 @@ a.bg-danger:hover { background-color: #e4b9b9; } .page-header { - padding-bottom: 8px; - margin: 36px 0 18px; + padding-bottom: 9px; + margin: 40px 0 20px; border-bottom: 1px solid #eeeeee; } ul, ol { margin-top: 0; - margin-bottom: 9px; } + margin-bottom: 10px; } ul ul, ul ol, ol ul, @@ -537,7 +557,7 @@ ol { dl { margin-top: 0; - margin-bottom: 18px; } + margin-bottom: 20px; } dt, dd { @@ -575,9 +595,9 @@ abbr[data-original-title] { text-transform: uppercase; } blockquote { - padding: 9px 18px; - margin: 0 0 18px; - font-size: 16.25px; + padding: 10px 20px; + margin: 0 0 20px; + font-size: 17.5px; border-left: 5px solid #eeeeee; } blockquote p:last-child, blockquote ul:last-child, @@ -622,7 +642,7 @@ blockquote:after { content: ""; } address { - margin-bottom: 18px; + margin-bottom: 20px; font-style: normal; line-height: 1.42857; } @@ -650,9 +670,9 @@ kbd { pre { display: block; - padding: 8.5px; - margin: 0 0 9px; - font-size: 12px; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; line-height: 1.42857; word-break: break-all; word-wrap: break-word; @@ -1351,7 +1371,7 @@ th { .table { width: 100%; - margin-bottom: 18px; } + margin-bottom: 20px; } .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, @@ -1375,7 +1395,7 @@ th { .table > tbody + tbody { border-top: 2px solid #dddddd; } .table .table { - background-color: #e5e5e5; } + background-color: white; } .table-condensed > thead > tr > th, .table-condensed > thead > tr > td, @@ -1500,7 +1520,7 @@ table th[class*="col-"] { @media (max-width: 767px) { .table-responsive { width: 100%; - margin-bottom: 13.5px; + margin-bottom: 15px; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; @@ -1546,8 +1566,8 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: 18px; - font-size: 19.5px; + margin-bottom: 20px; + font-size: 21px; line-height: inherit; color: #333333; border: 0; @@ -1591,16 +1611,16 @@ input[type="checkbox"]:focus { output { display: block; padding-top: 7px; - font-size: 13px; + font-size: 14px; line-height: 1.42857; color: #555555; } .form-control { display: block; width: 100%; - height: 32px; + height: 34px; padding: 6px 12px; - font-size: 13px; + font-size: 14px; line-height: 1.42857; color: #555555; background-color: white; @@ -1635,7 +1655,7 @@ input[type="search"] { -webkit-appearance: none; } input[type="date"] { - line-height: 32px; } + line-height: 34px; } .form-group { margin-bottom: 15px; } @@ -1643,7 +1663,7 @@ input[type="date"] { .radio, .checkbox { display: block; - min-height: 18px; + min-height: 20px; margin-top: 10px; margin-bottom: 10px; padding-left: 20px; } @@ -1718,17 +1738,17 @@ select[multiple].input-sm, .input-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { - height: 45px; + height: 46px; padding: 10px 16px; - font-size: 17px; + font-size: 18px; line-height: 1.33; border-radius: 6px; } select.input-lg, .input-group-lg > select.form-control, .input-group-lg > select.input-group-addon, .input-group-lg > .input-group-btn > select.btn { - height: 45px; - line-height: 45px; } + height: 46px; + line-height: 46px; } textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > textarea.input-group-addon, @@ -1742,15 +1762,15 @@ select[multiple].input-lg, .has-feedback { position: relative; } .has-feedback .form-control { - padding-right: 40px; } + padding-right: 42.5px; } .has-feedback .form-control-feedback { position: absolute; - top: 23px; + top: 25px; right: 0; display: block; - width: 32px; - height: 32px; - line-height: 32px; + width: 34px; + height: 34px; + line-height: 34px; text-align: center; } .has-success .help-block, @@ -1868,7 +1888,7 @@ select[multiple].input-lg, padding-top: 7px; } .form-horizontal .radio, .form-horizontal .checkbox { - min-height: 25px; } + min-height: 27px; } .form-horizontal .form-group { margin-left: -15px; margin-right: -15px; } @@ -1897,7 +1917,7 @@ select[multiple].input-lg, border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; - font-size: 13px; + font-size: 14px; line-height: 1.42857; border-radius: 4px; -webkit-user-select: none; @@ -2083,7 +2103,7 @@ select[multiple].input-lg, .btn-lg, .btn-group-lg > .btn { padding: 10px 16px; - font-size: 17px; + font-size: 18px; line-height: 1.33; border-radius: 6px; } @@ -2775,7 +2795,7 @@ input[type="button"].btn-block { padding: 5px 0; margin: 2px 0 0; list-style: none; - font-size: 13px; + font-size: 14px; background-color: white; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); @@ -2788,7 +2808,7 @@ input[type="button"].btn-block { left: auto; } .dropdown-menu .divider { height: 1px; - margin: 8px 0; + margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .dropdown-menu > li > a { @@ -3062,7 +3082,7 @@ input[type="button"].btn-block { .input-group-addon { padding: 6px 12px; - font-size: 13px; + font-size: 14px; font-weight: normal; line-height: 1; color: #555555; @@ -3080,7 +3100,7 @@ input[type="button"].btn-block { .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .input-group-addon.btn { padding: 10px 16px; - font-size: 17px; + font-size: 18px; border-radius: 6px; } .input-group-addon input[type="radio"], .input-group-addon input[type="checkbox"] { @@ -3160,7 +3180,7 @@ input[type="button"].btn-block { border-color: #428bca; } .nav .nav-divider { height: 1px; - margin: 8px 0; + margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .nav > li > a > img { @@ -3180,7 +3200,7 @@ input[type="button"].btn-block { border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; - background-color: #e5e5e5; + background-color: white; border: 1px solid #dddddd; border-bottom-color: transparent; cursor: default; } @@ -3238,7 +3258,7 @@ input[type="button"].btn-block { .nav-tabs.nav-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:focus { - border-bottom-color: #e5e5e5; } } + border-bottom-color: white; } } .tab-content > .tab-pane { display: none; } @@ -3253,7 +3273,7 @@ input[type="button"].btn-block { .navbar { position: relative; min-height: 50px; - margin-bottom: 18px; + margin-bottom: 20px; border: 1px solid transparent; } .navbar:before, .navbar:after { content: " "; @@ -3347,9 +3367,9 @@ input[type="button"].btn-block { .navbar-brand { float: left; - padding: 16px 15px; - font-size: 17px; - line-height: 18px; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; height: 50px; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } @@ -3382,11 +3402,11 @@ input[type="button"].btn-block { display: none; } } .navbar-nav { - margin: 8px -15px; } + margin: 7.5px -15px; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; - line-height: 18px; } + line-height: 20px; } @media (max-width: 767px) { .navbar-nav .open .dropdown-menu { position: static; @@ -3400,7 +3420,7 @@ input[type="button"].btn-block { .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { - line-height: 18px; } + line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } @media (min-width: 768px) { @@ -3410,8 +3430,8 @@ input[type="button"].btn-block { .navbar-nav > li { float: left; } .navbar-nav > li > a { - padding-top: 16px; - padding-bottom: 16px; } + padding-top: 15px; + padding-bottom: 15px; } .navbar-nav.navbar-right:last-child { margin-right: -15px; } } @@ -3429,8 +3449,8 @@ input[type="button"].btn-block { border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - margin-top: 9px; - margin-bottom: 9px; } + margin-top: 8px; + margin-bottom: 8px; } @media (max-width: 767px) { .navbar-form .form-group { margin-bottom: 5px; } } @@ -3457,8 +3477,8 @@ input[type="button"].btn-block { border-bottom-left-radius: 0; } .navbar-btn { - margin-top: 9px; - margin-bottom: 9px; } + margin-top: 8px; + margin-bottom: 8px; } .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn { margin-top: 10px; margin-bottom: 10px; } @@ -3467,8 +3487,8 @@ input[type="button"].btn-block { margin-bottom: 14px; } .navbar-text { - margin-top: 16px; - margin-bottom: 16px; } + margin-top: 15px; + margin-bottom: 15px; } @media (min-width: 768px) { .navbar-text { float: left; @@ -3583,7 +3603,7 @@ input[type="button"].btn-block { .breadcrumb { padding: 8px 15px; - margin-bottom: 18px; + margin-bottom: 20px; list-style: none; background-color: whitesmoke; border-radius: 4px; } @@ -3599,7 +3619,7 @@ input[type="button"].btn-block { .pagination { display: inline-block; padding-left: 0; - margin: 18px 0; + margin: 20px 0; border-radius: 4px; } .pagination > li { display: inline; } @@ -3652,7 +3672,7 @@ input[type="button"].btn-block { .pagination-lg > li > a, .pagination-lg > li > span { padding: 10px 16px; - font-size: 17px; } + font-size: 18px; } .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span { border-bottom-left-radius: 6px; @@ -3677,7 +3697,7 @@ input[type="button"].btn-block { .pager { padding-left: 0; - margin: 18px 0; + margin: 20px 0; list-style: none; text-align: center; } .pager:before, .pager:after { @@ -3808,7 +3828,7 @@ a.list-group-item.active > .badge, color: inherit; } .jumbotron p { margin-bottom: 15px; - font-size: 20px; + font-size: 21px; font-weight: 200; } .container .jumbotron { border-radius: 6px; } @@ -3823,14 +3843,14 @@ a.list-group-item.active > .badge, padding-right: 60px; } .jumbotron h1, .jumbotron .h1 { - font-size: 58.5px; } } + font-size: 63px; } } .thumbnail { display: block; padding: 4px; - margin-bottom: 18px; + margin-bottom: 20px; line-height: 1.42857; - background-color: #e5e5e5; + background-color: white; border: 1px solid #dddddd; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; @@ -3853,7 +3873,7 @@ a.thumbnail.active { .alert { padding: 15px; - margin-bottom: 18px; + margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert h4 { @@ -3927,8 +3947,8 @@ a.thumbnail.active { .progress { overflow: hidden; - height: 18px; - margin-bottom: 18px; + height: 20px; + margin-bottom: 20px; background-color: whitesmoke; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); @@ -3939,7 +3959,7 @@ a.thumbnail.active { width: 0%; height: 100%; font-size: 12px; - line-height: 18px; + line-height: 20px; color: white; text-align: center; background-color: #428bca; @@ -4121,7 +4141,7 @@ a.list-group-item-danger { line-height: 1.3; } .panel { - margin-bottom: 18px; + margin-bottom: 20px; background-color: white; border: 1px solid transparent; border-radius: 4px; @@ -4147,7 +4167,7 @@ a.list-group-item-danger { .panel-title { margin-top: 0; margin-bottom: 0; - font-size: 15px; + font-size: 16px; color: inherit; } .panel-title > a { color: inherit; } @@ -4281,7 +4301,7 @@ a.list-group-item-danger { margin-bottom: 0; } .panel-group { - margin-bottom: 18px; } + margin-bottom: 20px; } .panel-group .panel { margin-bottom: 0; border-radius: 4px; @@ -4386,7 +4406,7 @@ a.list-group-item-danger { .close { float: right; - font-size: 19.5px; + font-size: 21px; font-weight: bold; line-height: 1; color: black; @@ -4629,7 +4649,7 @@ button.close { .popover-title { margin: 0; padding: 8px 14px; - font-size: 13px; + font-size: 14px; font-weight: normal; line-height: 18px; background-color: #f7f7f7; diff --git a/static/css/font-awesome.min.css b/static/css/font-awesome.min.css index f71d1d6a..7bdd3355 100644 --- a/static/css/font-awesome.min.css +++ b/static/css/font-awesome.min.css @@ -1,3 +1,23 @@ +/* + * Spreed Speak Freely. + * Copyright (C) 2013-2014 struktur AG + * + * This file is part of Spreed Speak Freely. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ /* * Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)