haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds the new desing for the toolbars.

This commit is contained in:
fo 2014-09-18 16:26:12 +03:00
parent cbeff0d7b7
commit b5cf1e72b6
5 changed files with 51 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/main.css
View File

@ -19,6 +19,9 @@ html, body{
width: 20%; width: 20%;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
/* background-color:#dfebf1;*/
background-color:#FFFFFF;
border-left:1px solid #424242;
z-index: 5; z-index: 5;
} }
@ -114,13 +117,13 @@ html, body{
display: inline-block; display: inline-block;
position: relative; position: relative;
color: #FFFFFF; color: #FFFFFF;
top: 0; top: 0px;
padding: 10px 0px; padding: 10px 0px;
width: 39px; width: 38px;
cursor: pointer; cursor: pointer;
font-size: 11pt; font-size: 11pt;
text-align: center; 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; z-index: 1;
} }
@ -177,12 +180,12 @@ html, body{
a.button:hover, a.button:hover,
a.bottomToolbarButton:hover { a.bottomToolbarButton:hover {
top: 0; top: 0px;
cursor: pointer; cursor: pointer;
background: rgba(0, 0, 0, 0.3); background: rgba(255, 255, 255, 0.1);
border-radius: 5px; border-radius: 6px;
background-clip: padding-box; background-clip: padding-box;
-webkit-border-radius: 5px; -webkit-border-radius: 6px;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
} }
@ -196,7 +199,16 @@ a.bottomToolbarButton:hover {
top: 5; top: 5;
width: 1px; width: 1px;
height: 20px; 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 { input[type='text'], input[type='password'], textarea {
@ -267,16 +279,14 @@ form {
#bottomToolbar { #bottomToolbar {
display:block; display:block;
position: absolute; position: absolute;
right: -1; right: 0;
margin-right: 5px;
bottom: 40px; bottom: 40px;
width: 29px; width: 29px;
border-top-left-radius: 10px; border-radius: 6px;
border-bottom-left-radius: 10px;
color: #FFF; color: #FFF;
border: 1px solid #000; border: 1px solid rgba(256, 256, 256, 0.2);
background: rgba(50,50,50,.65); background: rgba(0,0,0,0.8);
padding-top: 5px;
padding-bottom: 5px;
z-index: 6; /*+1 from #remoteVideos*/ z-index: 6; /*+1 from #remoteVideos*/
} }
@ -285,8 +295,9 @@ form {
position: relative; position: relative;
color: #FFFFFF; color: #FFFFFF;
top: 0; top: 0;
padding-top: 3px; padding-top: 6px;
width: 29px; margin: 2px;
width: 25px;
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
font-size: 10pt; font-size: 10pt;

2
css/popover.css
View File

@ -8,7 +8,7 @@
min-width: 100px; min-width: 100px;
padding: 1px; padding: 1px;
text-align: left; text-align: left;
color: #428bca; color: #333333;
background-color: #ffffff; background-color: #ffffff;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #cccccc; border: 1px solid #cccccc;

16
css/popup_menu.css
View File

@ -2,17 +2,17 @@
ul.popupmenu { ul.popupmenu {
display:none; display:none;
position: absolute; position: absolute;
padding:0; padding:10px;
margin: 0; margin: 0;
bottom: 0; bottom: 0;
margin-bottom: 25px; margin-bottom: 35px;
padding-bottom: 5px; padding-bottom: 10px;
padding-top: 5px; padding-top: 10px;
right: 10px; right: 10px;
left: -5px; left: -5px;
width: 100px; width: 100px;
background-color: rgba(0,0,0,1); background-color: rgba(0,0,0,0.9);
-webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000; border: 1px solid rgba(256, 256, 256, 0.2);
border-radius:8px; border-radius:8px;
} }
@ -30,8 +30,8 @@ ul.popupmenu li {
} }
ul.popupmenu li:hover { ul.popupmenu li:hover {
background-color: rgba(82, 82, 82, .7); background-color: rgba(256, 256, 256, .2);
border-radius:2px; border-radius:6px;
} }
/*Link Appearance*/ /*Link Appearance*/

13
css/videolayout_default.css
View File

@ -285,14 +285,17 @@
#toolbar { #toolbar {
display:inline-block; display:inline-block;
position:relative; position:relative;
margin-top:5px;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
height:39px; padding-left:2px;
padding-right:2px;
height:38px;
width:auto; width:auto;
background: linear-gradient(to bottom, rgba(103,103,103,.65) , rgba(0,0,0,.65)); background-color: rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000; border: 1px solid rgba(256, 256, 256, 0.2);
border-bottom-left-radius: 12px; border-radius: 6px;
border-bottom-right-radius: 12px;
} }
#subject { #subject {

10
index.html
View File

@ -58,12 +58,12 @@
<script src="message_handler.js?v=1"></script> <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 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" 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/main.css?v=24"/>
<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/videolayout_default.css?v=11" id="videolayout_default"/>
<link rel="stylesheet" href="css/jquery-impromptu.css?v=4"> <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
<link rel="stylesheet" href="css/modaldialog.css?v=3"> <link rel="stylesheet" href="css/modaldialog.css?v=3">
<link rel="stylesheet" href="css/popup_menu.css?v=2"> <link rel="stylesheet" href="css/popup_menu.css?v=3">
<link rel="stylesheet" href="css/popover.css?v=1"> <link rel="stylesheet" href="css/popover.css?v=2">
<link rel="stylesheet" href="css/contact_list.css?v=1"> <link rel="stylesheet" href="css/contact_list.css?v=1">
<link rel="stylesheet" href="css/welcome_page.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> <i id="chatBottomButton" class="icon-chat-simple"></i>
</a> </a>
</span> </span>
<div class="bottom_button_separator"></div>
<span class="bottomToolbar_span"> <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();'> <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> <i id="contactListButton" class="icon-contactList"></i>
</a> </a>
</span> </span>
<div class="bottom_button_separator"></div>
<span class="bottomToolbar_span"> <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()'> <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> <i id="filmStripButton" class="icon-filmstrip"></i>