Place OC controls inside own toolbar as dijit widgets

1 files changed, 56 insertions, 48 deletions

diff --git a/css/style.css b/css/style.css
index cf6e1af5..0b498a47 100755
--- a/css/style.css
+++ b/css/style.css
@@ -116,58 +116,45 @@
 	white-space: nowrap;
 }
 
-#odf-toolbar{
+.claro #header{
 	text-align: left;
 	position: absolute;
 	width: 100%;
 	padding:0;
-	z-index: 500;
+	z-index: 500 !important;
 }
 
-#odf-toolbar #dropdown{
+#header #dropdown{
 	right: auto;
-	top: 83px;
-}
-
-#body-user #document-title #header{
-	height: 45px;
+	top: 45px;
 }
 
-#document-title{
-	padding: 4px 0 5px;
-	border-bottom: 1px solid #E9E9E9;
-
-	text-align: center;
-	font-weight: bold;
-	color:#fff;
-	background-color:#1d2d44;
+#header .padded{
+	margin-right:40px;
 }
 
-#document-title div.logo-wide{
-	float: left;
-	margin: 5px;
-	z-index: 110;
+#document-title {
+	min-width:300px;
+	padding: 7px;
+	font-weight: normal;
+	color: #FFF;
 }
 
-#document-title div{
-	position: relative;
-}
-#document-title .filename {
-	margin-top: 8px !important;
-	width: 300px;
-}
-#document-title-container {
-	padding-top: 7px;
-	font-weight: normal;
+#ocToolbar .filename{
+	padding: 5px 6px;
+	min-width: 300px;
+	margin-top: 0;
 }
 
 #odf-close{
-	margin-top: 0;
+	position:absolute;
+	right:0;
+	margin: 8px;
 	float: right;
 }
 #odf-close.icon-close {
-	height: 29px;
-	width: 29px;
+	height: 23px;
+	width: 23px;
 }
 
 #odf-invite{
@@ -198,7 +185,7 @@
 
 #documents-overlay-below{
 	right: 72px;
-	top: 83px;
+	top: 45px;
     filter:alpha(opacity=100);
     opacity: 1;
 	background:#fff;
@@ -224,8 +211,9 @@
 #warning-connection-lost{
 	position: relative;
 	z-index: 2000;
-	margin-top: 35px;
-	padding: 8px 0;
+	height: 19px;
+	margin-top: -2px;
+	padding: 13px 0;
 	text-align: center;
 	color: #ffffff;
 	background-color: #CE7070;
@@ -234,8 +222,9 @@
 }
 
 #warning-connection-lost img {
-	margin-right: 4px;
-	float: right;
+	position: absolute;
+	top: 12px;
+	right: 10px;
 	height: 20px;
 }
 
@@ -254,7 +243,7 @@
 }
 
 #members {
-	padding-top: 86px !important;
+	padding-top: 47px !important;
 	background-color: #ddd !important;
 }
 
@@ -286,23 +275,46 @@
 	font-size: 10px !important;
 }
 
+#ocToolbar, #ocToolbarInside{
+	border-bottom: none !important;
+	background:  none !important;
+	box-shadow: none !important;
+}
+
 #toolbar {
-	top: 45px !important;
+	position:static !important;
+	min-height: 29px !important;
 	border-bottom: none !important;
-	padding: 5px 0 0 !important;
+	border-radius: 2px;
+	margin: 7px 30px 0 0 !important;
+	padding: 0 !important;
 	box-shadow: none !important;
-	background-color: rgba(255,255,255,.95);
+	background: #F5F5F5 !important;
+}
+
+#ocToolbar .dijitToolbar{
+	float:left;
 }
 
 #toolbar > .dijit{
+	margin-top: 2px !important;
 	margin-left:3px;
 }
 #toolbar > span.dijit{
 	margin-left: 0;
 }
 
+#toolbar > .dijitComboBox{
+	margin: 3px 5px 0 3px !important;
+}
+
+#toolbar > .dijitComboBox .dijitInputInner{
+vertical-align: middle;
+line-height: 1.45em;
+}
+
 #container {
-	top: 83px !important;
+	top: 44px !important;
 }
 
 #canvas > div {
@@ -326,6 +338,7 @@ editinfo > div.editInfoMarker:hover {
 
 .dijitToolbar{
 	min-height: 31px;
+	line-height: 1em;
 }
 
 .dijitToolbar .dijitDropDownButton {
@@ -351,11 +364,6 @@ margin-top: -1px;
 .dojoTabular thead,.dojoTabular tfoot {background-color: #efefef; border: 1px solid #ccc; border-width: 1px 0;}
 .dojoTabular th,.dojoTabular td {padding: 0.25em 0.5em;}
 
-/* raise notification z-index above the documents app */
-#odf-toolbar + #notification-container {
-	z-index: 501;
-}
-
 document p{
 	cursor:auto;
 }