diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
new file mode 100644
index 000000000..8192e9d51
Binary files /dev/null and b/app/assets/images/logo.png differ
diff --git a/app/assets/javascripts/layout.js b/app/assets/javascripts/layout.js
index d1f403fed..715e0955b 100644
--- a/app/assets/javascripts/layout.js
+++ b/app/assets/javascripts/layout.js
@@ -33,10 +33,10 @@
notifyGutter: 10,
collapsedSidebar: 30,
panelHeaderHeight: 48,
- gutter: 20, // Margin around the whole UI
- screenMargin: 20, // Margin around screens (not headers/sidebar)
+ gutter: 60, // Margin around the whole UI
+ screenMargin: 0, // Margin around screens (not headers/sidebar)
gridOuterMargin: 6, // Outer margin on Grids (added to screenMargin if screen)
- gridPadding: 4, // Padding around grid cells. Added to outer margin.
+ gridPadding: 8, // Padding around grid cells. Added to outer margin.
animationDuration: 400
};
diff --git a/app/assets/stylesheets/client/common.css.scss b/app/assets/stylesheets/client/common.css.scss
index 6b9f53dad..5060b5793 100644
--- a/app/assets/stylesheets/client/common.css.scss
+++ b/app/assets/stylesheets/client/common.css.scss
@@ -2,6 +2,14 @@
* Variables used across files
*/
+$ColorUIBackground: #323232; /* Dark Grey */
+$ColorScreenPrimary: #f34e1d; /* Orange */
+$ColorElementPrimary: #007985; /* Teal */
+$ColorText: #ffffff; /* White */
+$ColorLink: #9ec030; /* Lime */
+$ColorScreenBackground: lighten($ColorUIBackground, 10%);
+
+
$color1: #006AB6; /* mid blue */
$color2: #9A9084; /* warm gray */
$color3: #B11254; /* magenta */
diff --git a/app/assets/stylesheets/client/dialog.css.scss b/app/assets/stylesheets/client/dialog.css.scss
new file mode 100644
index 000000000..e396b6af3
--- /dev/null
+++ b/app/assets/stylesheets/client/dialog.css.scss
@@ -0,0 +1,25 @@
+@import "client/common.css.scss";
+
+.dialog {
+ display:none;
+ background-color:$ColorElementPrimary;
+ border: #666;
+ color:#000;
+ min-width: 400px;
+ min-height: 350px;
+}
+
+.dialog a {
+ color: $color1;
+}
+
+.dialog h1 {
+ font-weight: bold;
+ font-size: 150%;
+ margin: 12px;
+}
+.dialog .panel {
+ background-color: shade($ColorElementPrimary, 6%);
+ margin:12px;
+ padding: 12px;
+}
diff --git a/app/assets/stylesheets/client/footer.css.scss b/app/assets/stylesheets/client/footer.css.scss
new file mode 100644
index 000000000..bce0eb0c1
--- /dev/null
+++ b/app/assets/stylesheets/client/footer.css.scss
@@ -0,0 +1,24 @@
+@import "client/common.css.scss";
+
+.footer {
+ position: absolute;
+ bottom:10px;
+ left: 0px;
+ width: 100%;
+ color:$ColorText;
+ margin: 0px 0px 30px 60px;
+}
+
+.footer p {
+ font-size: 80%;
+ margin:3px;
+}
+
+.footer p.left {
+ float:left;
+}
+
+.footer p.right {
+ float:right;
+ margin-right: 120px;
+}
diff --git a/app/assets/stylesheets/client/header.css.scss b/app/assets/stylesheets/client/header.css.scss
new file mode 100644
index 000000000..d365ff5bf
--- /dev/null
+++ b/app/assets/stylesheets/client/header.css.scss
@@ -0,0 +1,51 @@
+@import "compass/utilities/text/replacement";
+@import "client/common.css.scss";
+
+div[layout="header"] h1 {
+ width: 252px;
+ height:47px;
+ @include replace-text(image-url("logo.png"));
+}
+
+/*.header h1 {*/
+ /*margin:22px;*/
+ /*font-size:300%;*/
+ /*font-family: 'LatoLight', Arial, sans-serif;*/
+/*}*/
+
+.userinfo {
+ position:absolute;
+ right:0px;
+ top:0px;
+ width: 266px;
+ z-index:5;
+}
+.userinfo img.avatar {
+ float:left;
+}
+.userinfo .username {
+ float:left;
+ margin-top: 18px;
+ cursor: pointer;
+}
+.userinfo h2 {
+ font-size:120%;
+ font-weight: bold;
+ float:left;
+ margin-right:4px;
+}
+.userinfo .profile-toggle {
+ display:inline-block;
+}
+.userinfo ul {
+ clear:both;
+ background: $color7;
+ display:none;
+}
+.userinfo li {
+ display:block;
+ margin: 2px;
+ padding: 2px;
+ background: scale-lightness($color7, 10%);
+}
+
diff --git a/app/assets/stylesheets/client/home.css.scss b/app/assets/stylesheets/client/home.css.scss
new file mode 100644
index 000000000..dde79855f
--- /dev/null
+++ b/app/assets/stylesheets/client/home.css.scss
@@ -0,0 +1,23 @@
+@import "compass/css3/images";
+@import "compass/css3/background-size";
+@import "client/common.css.scss";
+
+.homecard {
+ cursor:pointer;
+ background-color: shade($ColorScreenPrimary, 10%);
+ border: 1px solid $translucent1;
+}
+.homecard h2 {
+ background-color: $ColorScreenPrimary;
+ margin: 0px;
+ padding: 3px;
+ text-align:right;
+ font-size:150%;
+ font-weight: 300;
+ font-family: 'LatoLight', Arial, sans-serif;
+}
+
+.homecard.hover {
+ border: 1px solid $translucent2 !important;
+}
+
diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss
index bdc1311ad..90d4e6fd2 100644
--- a/app/assets/stylesheets/client/jamkazam.css.scss
+++ b/app/assets/stylesheets/client/jamkazam.css.scss
@@ -11,21 +11,17 @@
@import "client/common.css.scss";
body {
- color: $text;
- /*
- @include background-image(
- linear-gradient(top, $color7, scale-lightness($color7, 30%)));
- */
- background-color: shade($color7, 10%);
+ color: $ColorText;
+ background-color: $ColorUIBackground;
width: 100%;
- height: 1200px;
+ height: 100%;
overflow: hidden;
font-family: 'LatoRegular', Arial, sans-serif;
}
a {
cursor:pointer;
- color: $link;
+ color: $ColorLink;
}
a:hover {
@@ -81,90 +77,13 @@ label {
background-color: shade($color7, 10%);
}
-.notify {
- display:none;
- background-color: $color8;
- color:#000;
- overflow:auto;
-}
-.notify a {
- color:#000;
- font-weight:bold;
-}
-
-.dialog {
- display:none;
- background-color:$color8;
- border: #666;
- color:#000;
- min-width: 400px;
- min-height: 350px;
-}
-
-.dialog a {
- color: $color1;
-}
-
-.dialog h1 {
- font-weight: bold;
- font-size: 150%;
- margin: 12px;
-}
-.dialog .panel {
- background-color: shade($color8, 6%);
- margin:12px;
- padding: 12px;
-}
-
-
-
-.header h1 {
- margin:22px;
- font-size:300%;
- font-family: 'LatoLight', Arial, sans-serif;
-}
-
-.userinfo {
- position:absolute;
- right:0px;
- top:0px;
- width: 266px;
- z-index:5;
-}
-.userinfo img.avatar {
- float:left;
-}
-.userinfo .username {
- float:left;
- margin-top: 18px;
- cursor: pointer;
-}
-.userinfo h2 {
- font-size:120%;
- font-weight: bold;
- float:left;
- margin-right:4px;
-}
-.userinfo .profile-toggle {
- display:inline-block;
-}
-.userinfo ul {
- clear:both;
- background: $color7;
- display:none;
-}
-.userinfo li {
- display:block;
- margin: 2px;
- padding: 2px;
- background: scale-lightness($color7, 10%);
-}
-
.screen {
display:none;
}
.screen.secondary {
+ border: 1px solid $ColorScreenPrimary;
+ background-color:$ColorScreenBackground;
}
.buttonrow, .screen.secondary .footer {
position: absolute;
@@ -196,109 +115,6 @@ label {
font-weight: bold;
}
-.homecard {
- cursor:pointer;
- border: 1px solid $translucent1;
-}
-.homecard h2 {
- position:absolute;
- bottom:0px;
- margin: 18px;
- font-size:240%;
- font-weight: 300;
- font-family: 'LatoLight', Arial, sans-serif;
-}
-
-.homecard.hover {
- border: 1px solid $translucent2 !important;
-}
-
-.homecard.createsession {
- background-color: $color10;
- @include background-image(
- linear-gradient(bottom left, $color10, scale-lightness($color10, $gradient-diff)));
-}
-.homecard.findsession {
- background-color: $color6;
- @include background-image(
- linear-gradient(bottom left, $color6, scale-lightness($color6, $gradient-diff)));
-}
-.homecard.practice {
- background-color: $color9;
- @include background-image(
- linear-gradient(bottom left, $color9, scale-lightness($color9, $gradient-diff)));
-}
-.homecard.bands {
- background-color: $color1;
- @include background-image(
- linear-gradient(bottom left, $color1, scale-lightness($color1, $gradient-diff)));
-}
-.homecard.recordings {
- background-color: $color5;
- @include background-image(
- linear-gradient(bottom left, shade($color5, $gradient-diff), $color5));
-}
-
-.sidebar {
- background-color: rgba($color8, 0.1);
-}
-.sidebar .panel-header {
- background-color: rgba(#fff, 0.2);
-}
-.sidebar h2 {
- padding: 12px;
- font-size: 180%;
- font-family: LatoLight, Arial, sans-serif;
-}
-.sidebar .expander {
- cursor:pointer;
- background-color: $color8;
- color: $color12;
-}
-.sidebar .expander p {
- font-size: 100%;
- font-weight: bold;
- font-family: LatoBold, Arial, sans-serif;
- padding: 8px;
-}
-.sidebar li {
- position: relative;
- height: 48px;
- line-height:48px;
- background-color: rgba($color8, 0.1);
- margin: 4px 0px 4px 24px;
-}
-.sidebar li.offline {
- color: shade($text, 40%);
-}
-.sidebar li img {
- margin: 8px;
- float:left;
-}
-.sidebar .name {
- display:block;
- position:absolute;
- line-height: 18px;
- height: 18px;
- left: 48px;
- top: 10px;
- font-weight: bold;
- font-family: LatoBold, Arial, sans-serif;
- font-size:110%;
-}
-
-.sidebar .status {
- display:block;
- position:absolute;
- line-height:12px;
- height: 12px;
- left: 48px;
- top: 26px;
- font-style: italic;
- font-family: LatoItalic, Arial, sans-serif;
- font-size: 100%;
-}
-
.avatar {
display: block;
float:left;
@@ -322,8 +138,8 @@ label {
/* TODO - generalize */
.instrument, .invitation {
margin: 1px;
- background: $color8;
- color:#000;
+ background: $ColorElementPrimary;
+ color:$ColorText;
padding: 3px;
width:auto;
float:left;
@@ -342,8 +158,8 @@ label {
/* Autocomplete */
.autocomplete {
border:1px solid #999;
- background:$color8;
- color:#000;
+ background:$ColorElementPrimary;
+ color:$ColorText;
cursor:default;
text-align:left;
max-height:350px;
@@ -360,51 +176,4 @@ label {
.autocomplete strong { font-weight:normal; color:#3399FF; }
-/* Session Tracks */
-.session-track {
- width: 125px;
- height: 300px;
- border: 1px solid #fff;
- position:relative;
- float:left;
-}
-.session-track [track-role] { margin:4px; }
-.session-track .latency { text-align:center; }
-.session-track .latency.good { color:#00ff00; }
-.session-track .latency.medium { color:#ffff00; }
-.session-track .latency.bad { color:#ff0000; }
-
-.session-track .mute {
- background-color:#bbb; color:#000;
- position: absolute;
- bottom: 80px;
- width: 117px;
- text-align: center;
-}
-
-.session-track .name {
- background-color:#ddd; color:#000;
- position: absolute;
- bottom: 60px;
- width: 117px;
- text-align: center;
-}
-.session-track .part {
- background-color:#fff; color:#000;
- position: absolute;
- bottom: 40px;
- width: 117px;
- text-align: center;
-}
-
-.session-track .avatar {
- position:absolute;
- width: 32px;
- height: 32px;
- bottom:4px;
- left: 46px;
-}
-.session-track .avatar img {
- width: 32px; height: 32px;
-}
diff --git a/app/assets/stylesheets/client/notify.css.scss b/app/assets/stylesheets/client/notify.css.scss
new file mode 100644
index 000000000..6feaebd7c
--- /dev/null
+++ b/app/assets/stylesheets/client/notify.css.scss
@@ -0,0 +1,11 @@
+@import "client/common.css.scss";
+
+.notify {
+ display:none;
+ background-color: $ColorElementPrimary;
+ color:$ColorText;
+ overflow:auto;
+}
+.notify a {
+ font-weight:bold;
+}
diff --git a/app/assets/stylesheets/client/session.css.scss b/app/assets/stylesheets/client/session.css.scss
new file mode 100644
index 000000000..ca24110a9
--- /dev/null
+++ b/app/assets/stylesheets/client/session.css.scss
@@ -0,0 +1,49 @@
+@import "client/common.css.scss";
+
+/* Session Tracks */
+.session-track {
+ width: 125px;
+ height: 300px;
+ border: 1px solid #fff;
+ position:relative;
+ float:left;
+}
+.session-track [track-role] { margin:4px; }
+.session-track .latency { text-align:center; }
+.session-track .latency.good { color:#00ff00; }
+.session-track .latency.medium { color:#ffff00; }
+.session-track .latency.bad { color:#ff0000; }
+
+.session-track .mute {
+ background-color:#bbb; color:#000;
+ position: absolute;
+ bottom: 80px;
+ width: 117px;
+ text-align: center;
+}
+
+.session-track .name {
+ background-color:#ddd; color:#000;
+ position: absolute;
+ bottom: 60px;
+ width: 117px;
+ text-align: center;
+}
+.session-track .part {
+ background-color:#fff; color:#000;
+ position: absolute;
+ bottom: 40px;
+ width: 117px;
+ text-align: center;
+}
+
+.session-track .avatar {
+ position:absolute;
+ width: 32px;
+ height: 32px;
+ bottom:4px;
+ left: 46px;
+}
+.session-track .avatar img {
+ width: 32px; height: 32px;
+}
diff --git a/app/assets/stylesheets/client/sidebar.css.scss b/app/assets/stylesheets/client/sidebar.css.scss
new file mode 100644
index 000000000..9d4c76b00
--- /dev/null
+++ b/app/assets/stylesheets/client/sidebar.css.scss
@@ -0,0 +1,67 @@
+@import "client/common.css.scss";
+
+.sidebar {
+ background-color: $ColorElementPrimary;
+}
+.sidebar .panel-header {
+ background-color: shade($ColorElementPrimary, 10);
+}
+.sidebar h2 {
+ padding: 12px;
+ font-size: 180%;
+ font-family: LatoLight, Arial, sans-serif;
+}
+.sidebar .expander {
+ cursor:pointer;
+ background-color:$ColorUIBackground;
+ color: $ColorElementPrimary;
+}
+.sidebar .expander p {
+ text-align:right;
+ font-size: 100%;
+ font-weight: bold;
+ font-family: LatoBold, Arial, sans-serif;
+ padding: 8px;
+}
+.sidebar .expander p span {
+ padding: 0px 4px;
+ margin: 0px 2px;
+ background-color: $ColorElementPrimary;
+ color: lighten($ColorElementPrimary, 15);
+}
+.sidebar li {
+ position: relative;
+ height: 48px;
+ line-height:48px;
+ margin: 4px 0px 4px 24px;
+}
+.sidebar li.offline {
+ color: shade($text, 40%);
+}
+.sidebar li img {
+ margin: 8px;
+ float:left;
+}
+.sidebar .name {
+ display:block;
+ position:absolute;
+ line-height: 18px;
+ height: 18px;
+ left: 48px;
+ top: 10px;
+ font-weight: bold;
+ font-family: LatoBold, Arial, sans-serif;
+ font-size:110%;
+}
+
+.sidebar .status {
+ display:block;
+ position:absolute;
+ line-height:12px;
+ height: 12px;
+ left: 48px;
+ top: 26px;
+ font-style: italic;
+ font-family: LatoItalic, Arial, sans-serif;
+ font-size: 100%;
+}
diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb
index 55f293a7b..a97287a30 100644
--- a/app/views/clients/index.html.erb
+++ b/app/views/clients/index.html.erb
@@ -8,6 +8,17 @@
or Sign In
+
+