Adds the new desing for the toolbars.
This commit is contained in:
parent
cbeff0d7b7
commit
b5cf1e72b6
45
css/main.css
45
css/main.css
|
@ -19,6 +19,9 @@ html, body{
|
|||
width: 20%;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
/* background-color:#dfebf1;*/
|
||||
background-color:#FFFFFF;
|
||||
border-left:1px solid #424242;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
|
@ -114,13 +117,13 @@ html, body{
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
color: #FFFFFF;
|
||||
top: 0;
|
||||
top: 0px;
|
||||
padding: 10px 0px;
|
||||
width: 39px;
|
||||
width: 38px;
|
||||
cursor: pointer;
|
||||
font-size: 11pt;
|
||||
text-align: center;
|
||||
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
|
||||
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
@ -177,12 +180,12 @@ html, body{
|
|||
|
||||
a.button:hover,
|
||||
a.bottomToolbarButton:hover {
|
||||
top: 0;
|
||||
top: 0px;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
background-clip: padding-box;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-border-radius: 6px;
|
||||
-webkit-background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
@ -196,7 +199,16 @@ a.bottomToolbarButton:hover {
|
|||
top: 5;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #676767;
|
||||
background: #373737;
|
||||
}
|
||||
|
||||
.bottom_button_separator {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 5;
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background: #373737;
|
||||
}
|
||||
|
||||
input[type='text'], input[type='password'], textarea {
|
||||
|
@ -267,16 +279,14 @@ form {
|
|||
#bottomToolbar {
|
||||
display:block;
|
||||
position: absolute;
|
||||
right: -1;
|
||||
right: 0;
|
||||
margin-right: 5px;
|
||||
bottom: 40px;
|
||||
width: 29px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-radius: 6px;
|
||||
color: #FFF;
|
||||
border: 1px solid #000;
|
||||
background: rgba(50,50,50,.65);
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px solid rgba(256, 256, 256, 0.2);
|
||||
background: rgba(0,0,0,0.8);
|
||||
z-index: 6; /*+1 from #remoteVideos*/
|
||||
}
|
||||
|
||||
|
@ -285,8 +295,9 @@ form {
|
|||
position: relative;
|
||||
color: #FFFFFF;
|
||||
top: 0;
|
||||
padding-top: 3px;
|
||||
width: 29px;
|
||||
padding-top: 6px;
|
||||
margin: 2px;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 10pt;
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
min-width: 100px;
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
color: #428bca;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #cccccc;
|
||||
|
|
|
@ -2,17 +2,17 @@
|
|||
ul.popupmenu {
|
||||
display:none;
|
||||
position: absolute;
|
||||
padding:0;
|
||||
padding:10px;
|
||||
margin: 0;
|
||||
bottom: 0;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 35px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
right: 10px;
|
||||
left: -5px;
|
||||
width: 100px;
|
||||
background-color: rgba(0,0,0,1);
|
||||
-webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000;
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
border: 1px solid rgba(256, 256, 256, 0.2);
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
|
@ -30,8 +30,8 @@ ul.popupmenu li {
|
|||
}
|
||||
|
||||
ul.popupmenu li:hover {
|
||||
background-color: rgba(82, 82, 82, .7);
|
||||
border-radius:2px;
|
||||
background-color: rgba(256, 256, 256, .2);
|
||||
border-radius:6px;
|
||||
}
|
||||
|
||||
/*Link Appearance*/
|
||||
|
|
|
@ -285,14 +285,17 @@
|
|||
#toolbar {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
margin-top:5px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
height:39px;
|
||||
padding-left:2px;
|
||||
padding-right:2px;
|
||||
height:38px;
|
||||
width:auto;
|
||||
background: linear-gradient(to bottom, rgba(103,103,103,.65) , rgba(0,0,0,.65));
|
||||
-webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border: 1px solid rgba(256, 256, 256, 0.2);
|
||||
border-radius: 6px;
|
||||
|
||||
}
|
||||
|
||||
#subject {
|
||||
|
|
10
index.html
10
index.html
|
@ -58,12 +58,12 @@
|
|||
<script src="message_handler.js?v=1"></script>
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/font.css?v=4"/>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=23"/>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=10" id="videolayout_default"/>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=24"/>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=11" id="videolayout_default"/>
|
||||
<link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
|
||||
<link rel="stylesheet" href="css/modaldialog.css?v=3">
|
||||
<link rel="stylesheet" href="css/popup_menu.css?v=2">
|
||||
<link rel="stylesheet" href="css/popover.css?v=1">
|
||||
<link rel="stylesheet" href="css/popup_menu.css?v=3">
|
||||
<link rel="stylesheet" href="css/popover.css?v=2">
|
||||
<link rel="stylesheet" href="css/contact_list.css?v=1">
|
||||
<link rel="stylesheet" href="css/welcome_page.css?v=1">
|
||||
<!--
|
||||
|
@ -263,11 +263,13 @@
|
|||
<i id="chatBottomButton" class="icon-chat-simple"></i>
|
||||
</a>
|
||||
</span>
|
||||
<div class="bottom_button_separator"></div>
|
||||
<span class="bottomToolbar_span">
|
||||
<a class="bottomToolbarButton" data-container="body" data-toggle="popover" data-placement="top" data-container="body" id="contactlistpopover" content="Open / close contact list" onclick='BottomToolbar.toggleContactList();'>
|
||||
<i id="contactListButton" class="icon-contactList"></i>
|
||||
</a>
|
||||
</span>
|
||||
<div class="bottom_button_separator"></div>
|
||||
<span class="bottomToolbar_span">
|
||||
<a class="bottomToolbarButton" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="top" content="Show / hide film strip" onclick='BottomToolbar.toggleFilmStrip()'>
|
||||
<i id="filmStripButton" class="icon-filmstrip"></i>
|
||||
|
|
Loading…
Reference in New Issue