# HG changeset patch # User souliane # Date 1402339062 -7200 # Node ID 305044acb6f04d29fcb6f0ac078524c4b61f1c23 # Parent 830b50593597d286f9844fd20ff171d6c93176ed browser_side: fixes CSS: - indentation set to 4 characters - updated the vendor prefixes with autoprefixer - validated with W3C CSS3 validator diff -r 830b50593597 -r 305044acb6f0 src/browser/public/libervia.css --- a/src/browser/public/libervia.css Tue Jun 10 01:15:13 2014 +0200 +++ b/src/browser/public/libervia.css Mon Jun 09 20:37:42 2014 +0200 @@ -2,6 +2,7 @@ Libervia: a Salut à Toi frontend Copyright (C) 2011, 2012, 2013, 2014 Jérôme Poisson Copyright (C) 2011 Adrien Vigneron +Copyright (C) 2013, 2014 Adrien Cossa 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 @@ -112,14 +113,14 @@ } .scrollpanel { - margin-bottom: -10000px; + margin-bottom: -10000px; } .iescrollpanelfix { - position: relative; - top: 100%; - margin-bottom: -10000px; + position: relative; + top: 100%; + margin-bottom: -10000px; } @@ -145,26 +146,19 @@ } .gwt-MenuBar,.gwt-MenuBar-horizontal { - /*background-color: #01FF78; - border: 1px solid #87B3FF; - cursor: default;*/ width: 100%; height: 28px; margin: 0; padding: 5px 5px 0 5px; line-height: 100%; + -webkit-box-shadow: 0px 1px 4px #000; box-shadow: 0px 1px 4px #000; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); border: 1px solid #ddd; border-radius: 0 0 1em 1em; - -webkit-border-radius: 0 0 1em 1em; - -moz-border-radius: 0 0 1em 1em; background-color: #222; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’); background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222)); - background: -moz-linear-gradient(top, #444444, #222222); - background-image: -o-linear-gradient(#444444,#222222); + background: -webkit-linear-gradient(top, #444444, #222222); + background: linear-gradient(to bottom, #444444, #222222); display: inline-block; } @@ -174,14 +168,10 @@ height: 100%; color: #e7e5e5; padding: 3px 15px; - /*display: block;*/ border-radius: 1em 1em 1em 1em; - -webkit-border-radius: 1em 1em 1em 1em; - -moz-border-radius: 1em 1em 1em 1em; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition: color 0.2s linear; - -moz-transition: color 0.2s linear; - -o-transition: color 0.2s linear; + transition: color 0.2s linear; } .gwt-MenuItem img { @@ -189,11 +179,10 @@ } .gwt-MenuBar-horizontal .gwt-MenuItem-selected { - background-color: #eee; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′); + background-color: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); - background: -moz-linear-gradient(top, #eee, #aaa); - background-image: -o-linear-gradient(#eee,#aaa); + background: -webkit-linear-gradient(top, #eee, #aaa); + background: linear-gradient(to bottom, #eee, #aaa); color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); cursor: pointer; @@ -211,23 +200,16 @@ .gwt-MenuBar { background-color: #fff; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); - background: -moz-linear-gradient(top, #fff, #ccc); - background-image: -o-linear-gradient(#fff,#ccc); - /*display: none;*/ + background: -webkit-linear-gradient(top, #fff, #ccc); + background: linear-gradient(to bottom, #fff, #ccc); height: 100%; min-width: 148px; margin: 0; padding: 0; - /*min-width: 148px; - top: 28px;*/ border: solid 1px #aaa; - -webkit-border-radius: 0 0 10px 10px; - -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } @@ -243,81 +225,59 @@ .gwt-MenuBar .gwt-MenuItem-selected { background: #cf2828 !important; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#981a1a’) !important; background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important; - background: -moz-linear-gradient(top, #cf2828, #981a1a) !important; - background-image: -o-linear-gradient(#cf2828,#981a1a) !important; + background: -webkit-linear-gradient(top, #cf2828, #981a1a) !important; + background: linear-gradient(to bottom, #cf2828, #981a1a) !important; color: #fff !important; - -webkit-border-radius: 0 0 0 0; - -moz-border-radius: 0 0 0 0; border-radius: 0 0 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, .1); - transition: color 0.2s linear; - -webkit-transition: color 0.2s linear; - -moz-transition: color 0.2s linear; - -o-transition: color 0.2s linear; + -webkit-transition: color 0.2s linear; + transition: color 0.2s linear; cursor: pointer; } -/*.menuLastPopup div tr:first-child td{ - border-radius: 0 0 9px 9px !important; - -webkit-border-radius: 0 0 9px 9px !important; - -moz-border-radius: 0 0 9px 9px !important; -}*/ - .gwt-MenuBar tr:last-child td { border-radius: 0 0 9px 9px !important; - -webkit-border-radius: 0 0 9px 9px !important; - -moz-border-radius: 0 0 9px 9px !important; } .menuLastPopup .gwt-MenuBar { - border-top-right-radius: 9px 9px 9px 9px; - -webkit-border-top-right-radius: 9px 9px 9px 9px; - -moz-border-top-right-radius: 9px 9px 9px 9px; + border-top-right-radius: 9px 9px; } .gwt-AutoCompleteTextBox { - width: 80%; - border: 1px solid #87B3FF; - margin-top: 20px; + width: 80%; + border: 1px solid #87B3FF; + margin-top: 20px; } .gwt-DialogBox { - padding: 10px; - border: 1px solid #aaa; - background-color: #fff; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’); - background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); - background: -moz-linear-gradient(top, #fff, #ccc); - background-image: -o-linear-gradient(#fff,#ccc); - border-radius: 9px 9px 9px 9px; - -webkit-border-radius: 9px 9px 9px 9px; - -moz-border-radius: 9px 9px 9px 9px; - box-shadow: 0px 1px 4px #000; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); + padding: 10px; + border: 1px solid #aaa; + background-color: #fff; + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); + background: -webkit-linear-gradient(top, #fff, #ccc); + background: linear-gradient(to bottom, #fff, #ccc); + border-radius: 9px 9px 9px 9px; + -webkit-box-shadow: 0px 1px 4px #000; + box-shadow: 0px 1px 4px #000; } .gwt-DialogBox .Caption { - height: 20px; - font-size: 1.3em !important; - background-color: #cf2828; - background: #cf2828 !important; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important; - background: -moz-linear-gradient(top, #cf2828, #981a1a) !important; - background-image: -o-linear-gradient(#cf2828,#981a1a); - color: #fff; - padding: 3px 3px 4px 3px; - margin: -10px; - margin-bottom: 5px; - font-weight: bold; - cursor: default; - text-align: center; - border-radius: 7px 7px 0 0; - -webkit-border-radius: 7px 7px 0 0; - -moz-border-radius: 7px 7px 0 0; + height: 20px; + font-size: 1.3em !important; + background-color: #cf2828; + background: #cf2828 !important; + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important; + background: -webkit-linear-gradient(top, #cf2828, #981a1a) !important; + background: linear-gradient(to bottom, #cf2828, #981a1a) !important; + color: #fff; + padding: 3px 3px 4px 3px; + margin: -10px; + margin-bottom: 5px; + font-weight: bold; + cursor: default; + text-align: center; + border-radius: 7px 7px 0 0; } /*DIALOG: button, listbox, textbox, label */ @@ -325,50 +285,41 @@ .gwt-DialogBox .gwt-button { background-color: #ccc; border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px; + -webkit-box-shadow: 0px 1px 4px #000; box-shadow: 0px 1px 4px #000; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444͸, endColorstr=’#222’); - background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); - background: -moz-linear-gradient(top, #444, #222); - background-image: -o-linear-gradient(#444,#222); - text-shadow: 1px 1px 1px rgba(0,0,0,0.2); - padding: 3px 5px 3px 5px; - margin: 10px 5px 10px 5px; - color: #fff; - font-weight: bold; - font-size: 1em; - border: none; - -webkit-transition: color 0.2s linear; - -moz-transition: color 0.2s linear; - -o-transition: color 0.2s linear; + background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); + background: -webkit-linear-gradient(top, #444, #222); + background: linear-gradient(to bottom, #444, #222); + text-shadow: 1px 1px 1px rgba(0,0,0,0.2); + padding: 3px 5px 3px 5px; + margin: 10px 5px 10px 5px; + color: #fff; + font-weight: bold; + font-size: 1em; + border: none; + -webkit-transition: color 0.2s linear; + transition: color 0.2s linear; } .gwt-DialogBox .gwt-button:hover { - background-color: #cf2828; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828͸, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); - background: -moz-linear-gradient(top, #cf2828, #981a1a); - background-image: -o-linear-gradient(#cf2828,#981a1a); - color: #fff; - text-shadow: 1px 1px 1px rgba(0,0,0,0.25); + background-color: #cf2828; + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); + background: -webkit-linear-gradient(top, #cf2828, #981a1a); + background: linear-gradient(to bottom, #cf2828, #981a1a); + color: #fff; + text-shadow: 1px 1px 1px rgba(0,0,0,0.25); } .gwt-DialogBox .gwt-TextBox { - background-color: #fff; + background-color: #fff; border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px; + -webkit-box-shadow:inset 0px 1px 4px #000; box-shadow:inset 0px 1px 4px #000; - -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); - padding: 3px 5px 3px 5px; - margin: 10px 5px 10px 5px; - color: #444; - font-size: 1em; - border: none; + padding: 3px 5px 3px 5px; + margin: 10px 5px 10px 5px; + color: #444; + font-size: 1em; + border: none; } .gwt-DialogBox .gwt-ListBox { @@ -376,20 +327,17 @@ width: 100%; background-color: #fff; border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px; + -webkit-box-shadow:inset 0px 1px 4px #000; box-shadow:inset 0px 1px 4px #000; - -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); - padding: 3px 5px 3px 5px; - margin: 10px 5px 10px 5px; - color: #444; - font-size: 1em; - border: none; + padding: 3px 5px 3px 5px; + margin: 10px 5px 10px 5px; + color: #444; + font-size: 1em; + border: none; } .gwt-DialogBox .gwt-Label { - margin-top: 13px; + margin-top: 13px; } /* Custom Dialogs */ @@ -413,14 +361,14 @@ div.contactBox { width: 100%; - /* We want the contact panel to not use all the available height when displayed - in the unibox panel (grey part), because the dialogs panels (white part) should - still be visible. The setting max-height: fit-content would be appropriate here - but it doesn't work with firefox 24.0. TODO: check if the current setting works - with other browsers... the panel should of course not be displayed on 100px - but exactly fit the contacts box. + /* We want the contact panel to not use all the available height when displayed + in the unibox panel (grey part), because the dialogs panels (white part) should + still be visible. The setting max-height: fit-content would be appropriate here + but it doesn't work with firefox 24.0. TODO: check if the current setting works + with other browsers... the panel should of course not be displayed on 100px + but exactly fit the contacts box. */ - max-height: 100px; + max-height: 100px; } .contactTitle { @@ -452,36 +400,30 @@ padding: 2px 15px; margin: 5px; display: inline-block; - text-decoration: none; + text-decoration: none; font-weight: bold; color: #e7e5e5; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); border-radius: 1em 1em 1em 1em; - -webkit-border-radius: 1em 1em 1em 1em; - -moz-border-radius: 1em 1em 1em 1em; - background-color: #eee; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa͸); - background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); - background: -moz-linear-gradient(top, #eee, #aaa); - background-image: -o-linear-gradient(#eee,#aaa); + background-color: #eee; + background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); + background: -webkit-linear-gradient(top, #eee, #aaa); + background: linear-gradient(to bottom, #eee, #aaa); color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); + -webkit-box-shadow: 0px 1px 1px #000; box-shadow: 0px 1px 1px #000; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); } div.group:hover { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); background-color: #cf2828; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828͸, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); - background: -moz-linear-gradient(top, #cf2828, #981a1a); - background-image: -o-linear-gradient(#cf2828,#981a1a); + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); + background: -webkit-linear-gradient(top, #cf2828, #981a1a); + background: linear-gradient(to bottom, #cf2828, #981a1a); -webkit-transition: color 0.1s linear; - -moz-transition: color 0.1s linear; - -o-transition: color 0.1s linear; + transition: color 0.1s linear; } .contact { font-size: 1em; @@ -494,7 +436,7 @@ margin-top: 3px; padding: 3px 10px 3px 10px; border-radius: 5px; - background-color: rgb(175, 175, 175); + background-color: rgb(175, 175, 175); } /* START - contact presence status */ @@ -525,16 +467,12 @@ .selected { color: #fff; background-color: #cf2828; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828͸, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); - background: -moz-linear-gradient(top, #cf2828, #981a1a); - background-image: -o-linear-gradient(#cf2828,#981a1a); + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); + background: -webkit-linear-gradient(top, #cf2828, #981a1a); + background: linear-gradient(to bottom, #cf2828, #981a1a); border-radius: 1em 1em 1em 1em; - -webkit-border-radius: 1em 1em 1em 1em; - -moz-border-radius: 1em 1em 1em 1em; -webkit-transition: color 0.2s linear; - -moz-transition: color 0.2s linear; - -o-transition: color 0.2s linear; + transition: color 0.2s linear; } .messageBox { @@ -542,10 +480,9 @@ padding: 5px; border: 1px solid #bbb; color: #444; - background: #fff url('media/libervia/unibox_2.png') top bottom no-repeat; + background: #fff url('media/libervia/unibox_2.png') right bottom no-repeat; + -webkit-box-shadow:inset 0 0 10px #ddd; box-shadow:inset 0 0 10px #ddd; - -webkit-box-shadow:inset 0 0 10px #ddd; - -moz-box-shadow:inset 0 0 10px #ddd; border-radius: 0px 0px 10px 10px; height: 28px; margin: 0px; @@ -564,9 +501,8 @@ border: 1px solid #bbb; color: #444; background: #fff url('media/libervia/unibox_2.png') top right no-repeat; + -webkit-box-shadow:inset 0 0 10px #ddd; box-shadow:inset 0 0 10px #ddd; - -webkit-box-shadow:inset 0 0 10px #ddd; - -moz-box-shadow:inset 0 0 10px #ddd; } .uniBoxButton { @@ -589,9 +525,9 @@ } .presence-button { - font-size: x-large; - padding-right: 5px; - cursor: pointer; + font-size: x-large; + padding-right: 5px; + cursor: pointer; } /* RegisterBox */ @@ -610,9 +546,8 @@ .registerPanel_main{ height: 100%; border: 5px solid #222; + -webkit-box-shadow: 0px 1px 4px #000; box-shadow: 0px 1px 4px #000; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .registerPanel_tabs .gwt-Label { @@ -637,54 +572,47 @@ } .registerPanel_right_side { - background: #111 url('media/libervia/register_right.png'); - height: 100%; - width: 100%; + background: #111 url('media/libervia/register_right.png'); + height: 100%; + width: 100%; } .registerPanel_content { - margin-left: 50px; - margin-top: 30px; + margin-left: 50px; + margin-top: 30px; } .registerPanel_content div { - font-size: 1em; - margin-left: 10px; - margin-top: 15px; - font-style: bold; - color: #888; + font-size: 1em; + margin-left: 10px; + margin-top: 15px; + font-weight: bold; + color: #888; } .registerPanel_content input { - height: 25px; - line-height: 25px; - width: 200px; - text-indent: 11px; - - background: #000; - color: #aaa; - border: 1px solid #222; - border-radius: 15px 15px 15px 15px; - -webkit-border-radius: 15px 15px 15px 15px; - -moz-border-radius: 15px 15px 15px 15px; + height: 25px; + line-height: 25px; + width: 200px; + text-indent: 11px; + background: #000; + color: #aaa; + border: 1px solid #222; + border-radius: 15px 15px 15px 15px; } .registerPanel_content input:focus { - border: 1px solid #444; + border: 1px solid #444; } .registerPanel_content .button, .registerPanel_content .button:visited { - background: #222 url('media/libervia/gradient.png') repeat-x; - display: inline-block; - text-decoration: none; - border-radius: 6px 6px 6px 6px; - -moz-border-radius: 6px 6px 6px 6px; - -webkit-border-radius: 6px 6px 6px 6px; - -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); - border-bottom: 1px solid rgba(0,0,0,0.25); - cursor: pointer; - margin-top: 30px; + background: #222 url('media/libervia/gradient.png') repeat-x; + display: inline-block; + text-decoration: none; + border-radius: 6px 6px 6px 6px; + border-bottom: 1px solid rgba(0,0,0,0.25); + cursor: pointer; + margin-top: 30px; } /* Fix for Opera */ @@ -712,15 +640,11 @@ .widgetHeader { margin: auto; height: 25px; - /*border: 1px solid #ddd;*/ border-radius: 10px 10px 0 0; - -webkit-border-radius: 10px 10px 0 0; - -moz-border-radius: 10px 10px 0 0; background-color: #222; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444͸, endColorstr=’#222’); - background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); - background: -moz-linear-gradient(top, #444, #222); - background-image: -o-linear-gradient(#444,#222); + background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); + background: -webkit-linear-gradient(top, #444, #222); + background: linear-gradient(to bottom, #444, #222); } .widgetHeader_title { @@ -743,52 +667,41 @@ } .widgetHeader_buttonGroup img { - background-color: transparent; + background-color: transparent; width: 25px; height: 20px; padding-top: 2px; padding-bottom: 3px; border-left: 1px solid #666; border-top: 0; - border-radius: 0 10px 0 0; - -webkit-border-radius: 0 10px 0 0; - -moz-border-radius: 0 10px 0 0; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555͸, endColorstr=’#333’); - background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); - background: -moz-linear-gradient(top, #555, #333); - background-image: -o-linear-gradient(#555,#333); + border-radius: 0 10px 0 0; + background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); + background: -webkit-linear-gradient(top, #555, #333); + background: linear-gradient(to bottom, #555, #333); } .widgetHeader_closeButton { - border-radius: 0 10px 0 0 !important; - -webkit-border-radius: 0 10px 0 0 !important; - -moz-border-radius: 0 10px 0 0 !important; + border-radius: 0 10px 0 0 !important; } .widgetHeader_settingButton { border-radius: 0 0 0 0 !important; - -webkit-border-radius: 0 0 0 0 !important; - -moz-border-radius: 0 0 0 0 !important; } .widgetHeader_buttonGroup img:hover { background-color: #cf2828; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828͸, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); - background: -moz-linear-gradient(top, #cf2828, #981a1a); - background-image: -o-linear-gradient(#cf2828,#981a1a); + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); + background: -webkit-linear-gradient(top, #cf2828, #981a1a); + background: linear-gradient(to bottom, #cf2828, #981a1a); } .widgetBody { border-radius: 0 0 10px 10px; - -webkit-border-radius: 0 0 10px 10px; - -moz-border-radius: 0 0 10px 10px; background-color: #fff; min-width: 200px; min-height: 150px; + -webkit-box-shadow:inset 0px 0 1px #444; box-shadow:inset 0px 0 1px #444; - -webkit-box-shadow:inset 0 0 1px #444; - -moz-box-shadow:inset 0 0 1px #444; } /* BorderWidgets */ @@ -804,8 +717,6 @@ /* Microblog */ .microblogPanel { -/* margin: auto; - width: 95% !important;*/ width: 100%; } @@ -822,7 +733,7 @@ } .mb_entry { - min-height: 64px; + min-height: 64px; } .mb_entry_header @@ -841,28 +752,26 @@ } .mb_entry_avatar { - float: left; + float: left; } .mb_entry_avatar img { - width: 48px; - height: 48px; - padding: 8px; + width: 48px; + height: 48px; + padding: 8px; } .mb_entry_dialog { - float: left; - min-height: 54px; - padding: 5px 20px 5px 20px; - border-collapse: separate; # for the bubble queue since the entry dialog is now a HorizontalPanel + float: left; + min-height: 54px; + padding: 5px 20px 5px 20px; + border-collapse: separate; /* for the bubble queue since the entry dialog is now a HorizontalPanel */ } .bubble { position: relative; padding: 15px; margin: 2px; - -webkit-border-radius:10px; - -moz-border-radius:10px; border-radius:10px; background: #EDEDED; border-color: #C1C1C1; @@ -870,20 +779,20 @@ border-style: solid; display: block; border-collapse: separate; - min-height: 15px; # for the bubble queue to be aligned when the bubble is empty + min-height: 15px; /* for the bubble queue to be aligned when the bubble is empty */ } .bubble:after { background: transparent url('media/libervia/bubble_after.png') top right no-repeat; - border: none; + border: none; content: ""; position: absolute; bottom: auto; left: -20px; top: 16px; display: block; - height: 20; - width: 20; + height: 20px; + width: 20px; } .bubble textarea{ @@ -910,7 +819,7 @@ text-align: right; display: block; position: relative; - top: -20px: + top: -20px; left: -20px; } @@ -932,7 +841,7 @@ } .chatText { - margin-top: 7px; + margin-top: 7px; } .chatTextInfo { @@ -943,8 +852,8 @@ .chatTextInfo-link { font-weight: bold; font-style: italic; - cursor: pointer; - display: inline; + cursor: pointer; + display: inline; } .chatArea { @@ -956,8 +865,6 @@ font-style: italic; margin-right: -4px; padding: 1px 3px 1px 3px; - -moz-border-radius: 15px 0 0 15px; - -webkit-border-radius: 15px 0 0 15px; border-radius: 15px 0 0 15px; background-color: #eee; color: #888; @@ -968,8 +875,6 @@ .chat_text_nick { font-weight: bold; padding: 1px 3px 1px 3px; - -moz-border-radius: 0 15px 15px 0; - -webkit-border-radius: 10 15px 15px 0; border-radius: 0 15px 15px 0; background-color: #eee; color: #b01e1e; @@ -1034,21 +939,21 @@ margin-left: 10px; margin-right: 10px; font-weight: bold; - color: black; + color: black; } .radiocol_upload_status_ok { margin-left: 10px; margin-right: 10px; font-weight: bold; - color: #28F215; + color: #28F215; } .radiocol_upload_status_ko { margin-left: 10px; margin-right: 10px; font-weight: bold; - color: #B80000; + color: #B80000; } /* Drag and drop */ @@ -1056,8 +961,6 @@ .dragover { background: #cf2828 !important; border-radius: 1em 1em 1em 1em !important; - -webkit-border-radius: 1em 1em 1em 1em !important; - -moz-border-radius: 1em 1em 1em 1em !important; } .dragover .widgetHeader, .dragover .widgetBody, .dragover .widgetBody span, .dragover .widgetHeader img { @@ -1066,31 +969,21 @@ .dragover.widgetHeader { border-radius: 1em 1em 0 0 !important; - -webkit-border-radius: 1em 1em 0 0 !important; - -moz-border-radius: 1em 1em 0 0 !important; } .dragover.widgetBody { border-radius: 0 0 1em 1em !important; - -webkit-border-radius: 0 0 1em 1em !important; - -moz-border-radius: 0 0 1em 1em !important; } /* Warning message */ .warningPopup { - font-size: 1em; + font-size: 1em; width: 100%; height: 26px; text-align: center; padding: 5px 0; border-bottom: 1px solid #444; - /*background-color: #fff; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’fff′, endColorstr=’#ccc’); - background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); - background: -moz-linear-gradient(top, #fff, #ccc); - background-image: -o-linear-gradient(#fff,#ccc); */ - } .warningTarget { @@ -1099,35 +992,19 @@ } .targetPublic { - background-color: red; /*#cf2828;*/ - /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); - background: -moz-linear-gradient(top, #cf2828, #981a1a); - background-image: -o-linear-gradient(#cf2828,#981a1a); */ + background-color: red; } .targetGroup { background-color: #00FFFB; - /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’68ba0f′, endColorstr=’#40700d’); - background: -webkit-gradient(linear, left top, left bottom, from(#68ba0f), to(#40700d)); - background: -moz-linear-gradient(top, #68ba0f, #40700d); - background-image: -o-linear-gradient(#68ba0f,#40700d); */ } .targetOne2One { background-color: #66FF00; - /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’); - background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222)); - background: -moz-linear-gradient(top, #444444, #222222); - background-image: -o-linear-gradient(#444444,#222222);*/ } .targetStatus { background-color: #fff; - /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’fff′, endColorstr=’#ccc’); - background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); - background: -moz-linear-gradient(top, #fff, #ccc); - background-image: -o-linear-gradient(#fff,#ccc); */ } /* Tab panel */ @@ -1139,24 +1016,24 @@ } .gwt-TabPanelBottom { - height: 100%; + height: 100%; } .gwt-TabBar { - font-weight: bold; - text-decoration: none; - border-bottom: 3px solid #a01c1c; + font-weight: bold; + text-decoration: none; + border-bottom: 3px solid #a01c1c; } .mainTabPanel .gwt-TabBar { - z-index: 10; - position: fixed; - bottom: 0; - left: 0; + z-index: 10; + position: fixed; + bottom: 0; + left: 0; } .gwt-TabBar .gwt-TabBarFirst { - height: 100%; + height: 100%; } .gwt-TabBar .gwt-TabBarRest { @@ -1166,67 +1043,55 @@ } .liberviaTabPanel .gwt-TabBar .gwt-TabBarItem { - cursor: pointer; - margin-right: 5px; + cursor: pointer; + margin-right: 5px; } .liberviaTabPanel .gwt-TabBarItem div { - color: #fff; + color: #fff; } .liberviaTabPanel .gwt-TabBarItem { - color: #444 !important; - background-color: #222; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444′, endColorstr=’#222’); - background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); - background: -moz-linear-gradient(top, #444, #222); - background-image: -o-linear-gradient(#444,#222); - box-shadow: 0px 1px 4px #000; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - padding: 4px 15px 4px 15px; - border-radius: 1em 1em 0 0; - -webkit-border-radius: 1em 1em 0 0; - -moz-border-radius: 1em 1em 0 0; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); + color: #444 !important; + background-color: #222; + background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); + background: -webkit-linear-gradient(top, #444, #222); + background: linear-gradient(to bottom, #444, #222); + -webkit-box-shadow: 0px 1px 4px #000; + box-shadow: 0px 1px 4px #000; + padding: 4px 15px 4px 15px; + border-radius: 1em 1em 0 0; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); } .liberviaTabPanel .gwt-TabBarItem-selected { - color: #fff; - background-color: #cf2828; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); - background: -moz-linear-gradient(top, #cf2828, #981a1a); - background-image: -o-linear-gradient(#cf2828,#981a1a); - box-shadow: 0px 1px 4px #000; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - padding: 4px 15px 4px 15px; - border-radius: 1em 1em 0 0; - -webkit-border-radius: 1em 1em 0 0; - -moz-border-radius: 1em 1em 0 0; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + color: #fff; + background-color: #cf2828; + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); + background: -webkit-linear-gradient(top, #cf2828, #981a1a); + background: linear-gradient(to bottom, #cf2828, #981a1a); + -webkit-box-shadow: 0px 1px 4px #000; + box-shadow: 0px 1px 4px #000; + padding: 4px 15px 4px 15px; + border-radius: 1em 1em 0 0; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .liberviaTabPanel div.gwt-TabBarItem:hover { - color: #fff; - background-color: #cf2828; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); - background: -moz-linear-gradient(top, #cf2828, #981a1a); - background-image: -o-linear-gradient(#cf2828,#981a1a); - box-shadow: 0px 1px 4px #000; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - padding: 4px 15px 4px 15px; - border-radius: 1em 1em 0 0; - -webkit-border-radius: 1em 1em 0 0; - -moz-border-radius: 1em 1em 0 0; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + color: #fff; + background-color: #cf2828; + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); + background: -webkit-linear-gradient(top, #cf2828, #981a1a); + background: linear-gradient(to bottom, #cf2828, #981a1a); + -webkit-box-shadow: 0px 1px 4px #000; + box-shadow: 0px 1px 4px #000; + padding: 4px 15px 4px 15px; + border-radius: 1em 1em 0 0; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .liberviaTabPanel .gwt-TabBar .gwt-TabBarItem-selected { - cursor: default; + cursor: default; } .globalLeftArea { @@ -1241,10 +1106,9 @@ * (messages entered in unibox will be sent to this widget) */ background-color: #cf2828; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828͸, endColorstr=’#981a1a’); - background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); - background: -moz-linear-gradient(top, #cf2828, #981a1a); - background-image: -o-linear-gradient(#cf2828,#981a1a); + background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); + background: -webkit-linear-gradient(top, #cf2828, #981a1a); + background: linear-gradient(to bottom, #cf2828, #981a1a); } .infoFrame { @@ -1323,27 +1187,23 @@ } .richTextSyntaxLabel { - text-align: right; - margin: 14px 0px 0px 14px; - font-size: 12px; + text-align: right; + margin: 14px 0px 0px 14px; + font-size: 12px; } .richTextToolButton { - cursor: pointer; + cursor: pointer; width:26px; height:26px; vertical-align: middle; margin: 2px 1px; border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px; + -webkit-box-shadow: 0px 1px 4px #000; box-shadow: 0px 1px 4px #000; - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); - border: none; - -webkit-transition: color 0.2s linear; - -moz-transition: color 0.2s linear; - -o-transition: color 0.2s linear; + border: none; + -webkit-transition: color 0.2s linear; + transition: color 0.2s linear; } .richTextIcon { @@ -1355,14 +1215,14 @@ /* Recipients panel */ .recipientButtonCell { - width:55px; + width:55px; } .recipientTypeMenu { } .recipientTypeItem { - cursor: pointer; + cursor: pointer; border-radius: 5px; width: 50px; } @@ -1371,14 +1231,11 @@ } .recipientTextBox { - cursor: pointer; + cursor: pointer; width: auto; border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px; + -webkit-box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6); box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6); - -webkit-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6); - -moz-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6); padding: 2px 1px; margin: 0px; color: #444; @@ -1386,28 +1243,27 @@ } .recipientTextBox-invalid { + -webkit-box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6); box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6); - -webkit-box-shadow:inset 0 1px 4px rgba(255, 0, 0, 0.6); - -moz-box-shadow:inset 0 1px 4px rgba(255, 0, 0, 0.6); border: 1px solid rgb(255, 0, 0); } .recipientRemoveButton { - margin: 0px 10px 0px 0px; - padding: 0px; - border: 1px dashed red; + margin: 0px 10px 0px 0px; + padding: 0px; + border: 1px dashed red; border-radius: 5px 5px 5px 5px; } .recipientRemoveIcon { - color: red; + color: red; width:15px; height:15px; - vertical-align: baseline; + vertical-align: baseline; } .dragover-recipientPanel { - border-radius: 5px; + border-radius: 5px; background: none repeat scroll 0% 0% rgb(135, 179, 255); border: 1px dashed rgb(35,79,255); } @@ -1427,26 +1283,26 @@ /* Contact group manager */ .contactGroupEditor { - width: 800px; - max-width:800px; - min-width: 800px; - margin-top: 9px; - margin-left:18px; + width: 800px; + max-width:800px; + min-width: 800px; + margin-top: 9px; + margin-left:18px; } .contactGroupRemoveButton { - margin: 0px 10px 0px 0px; - padding: 0px; - border: 1px dashed red; + margin: 0px 10px 0px 0px; + padding: 0px; + border: 1px dashed red; border-radius: 5px 5px 5px 5px; } .addContactGroupPanel { - + } .contactGroupPanel { - vertical-align:middle; + vertical-align:middle; } .toggleAssignedContacts { @@ -1462,7 +1318,7 @@ /* Room and contacts chooser */ .room-contact-chooser { - width:380px; + width:380px; } /* StackPanel */ @@ -1472,31 +1328,25 @@ .gwt-StackPanel .gwt-StackPanelItem { background-color: #222; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’); background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222)); - background: -moz-linear-gradient(top, #444444, #222222); - background-image: -o-linear-gradient(#444444,#222222); + background: -webkit-linear-gradient(top, #444444, #222222); + background: linear-gradient(to bottom, #444444, #222222); text-decoration: none; font-weight: bold; height: 100%; color: #e7e5e5; padding: 3px 15px; - /*display: block;*/ border-radius: 1em 1em 1em 1em; - -webkit-border-radius: 1em 1em 1em 1em; - -moz-border-radius: 1em 1em 1em 1em; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition: color 0.2s linear; - -moz-transition: color 0.2s linear; - -o-transition: color 0.2s linear; + transition: color 0.2s linear; } .gwt-StackPanel .gwt-StackPanelItem:hover { background-color: #eee; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); - background: -moz-linear-gradient(top, #eee, #aaa); - background-image: -o-linear-gradient(#eee,#aaa); + background: -webkit-linear-gradient(top, #eee, #aaa); + background: linear-gradient(to bottom, #eee, #aaa); color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); cursor: pointer; @@ -1504,10 +1354,9 @@ .gwt-StackPanel .gwt-StackPanelItem-selected { background-color: #eee; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); - background: -moz-linear-gradient(top, #eee, #aaa); - background-image: -o-linear-gradient(#eee,#aaa); + background: -webkit-linear-gradient(top, #eee, #aaa); + background: linear-gradient(to bottom, #eee,#aaa); color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); cursor: pointer; @@ -1519,19 +1368,17 @@ overflow: auto; background-color: #fff; border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px; - padding: 3px 5px 3px 5px; - margin: 10px 5px 10px 5px; - color: #444; - font-size: 1em; - border: solid 1px gray; + padding: 3px 5px 3px 5px; + margin: 10px 5px 10px 5px; + color: #444; + font-size: 1em; + border: solid 1px gray; } /* Radio buttons */ .gwt-RadioButton { - white-space: nowrap; + white-space: nowrap; } [contenteditable="true"] {