Added CSS for fullscreen mode (eg. for the point of sale)

bzr revid: mit@openerp.com-20120307160512-fziwyn40i45dgxap

2 files changed, 285 insertions, 314 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 52dcc46ec15..dab8e6070af 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -5,317 +5,279 @@
   color: #4c4c4c;
   font-size: 13px;
   background: white;
-  position: relative;
-}
-.openerp2 a {
-  text-decoration: none;
-}
-.openerp2 .oe_webclient {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.openerp2 .oe_webclient .oe_application {
-  position: absolute;
-  top: 32px;
-  bottom: 0;
-  left: 206px;
-  right: 0;
-}
-.openerp2 .oe_topbar {
-  width: 100%;
-  height: 31px;
-  border-top: solid 1px #d3d3d3;
-  border-bottom: solid 1px black;
-  background-color: #646060;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
-  background-image: -webkit-linear-gradient(top, #646060, #262626);
-  background-image: -moz-linear-gradient(top, #646060, #262626);
-  background-image: -ms-linear-gradient(top, #646060, #262626);
-  background-image: -o-linear-gradient(top, #646060, #262626);
-  background-image: linear-gradient(to bottom, #646060, #262626);
-}
-.openerp2 .oe_topbar .oe_systray {
-  float: right;
-}
-.openerp2 .oe_topbar .oe_systray > div {
-  float: left;
-  padding: 0 4px 0 4px;
-}
-.openerp2 .oe_topbar .oe_topbar_item li {
-  float: left;
-}
-.openerp2 .oe_topbar .oe_topbar_item li a {
-  display: block;
-  padding: 5px 10px 7px;
-  line-height: 20px;
-  height: 20px;
-  color: #eeeeee;
-  vertical-align: top;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-}
-.openerp2 .oe_topbar .oe_topbar_item li a:hover {
-  background: #303030;
-  color: white;
-  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-}
-.openerp2 .oe_topbar .oe_topbar_item .oe_active {
-  background: #303030;
-  font-weight: bold;
-  color: white;
-  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-}
-.openerp2 .oe_topbar .oe_topbar_avatar {
-  width: 24px;
-  height: 24px;
-  margin: -2px 2px 0 0;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-}
-.openerp2 .oe_topbar .oe_topbar_avatar {
-  vertical-align: top;
-}
-.openerp2 .oe_leftbar {
-  width: 205px;
-  height: 100%;
-  background: #f0eeee;
-  border-right: 1px solid #afafb6;
-  overflow: auto;
-  text-shadow: 0 1px 1px white;
-}
-.openerp2 .oe_leftbar .oe_footer {
-  position: absolute;
-  width: 205px;
-  text-align: center;
-  bottom: 8px;
-}
-.openerp2 a.oe_logo {
-  display: block;
-  text-align: center;
-  height: 70px;
-  line-height: 70px;
-}
-.openerp2 a.oe_logo img {
-  height: 40px;
-  width: 157px;
-  margin: 14px 0;
-}
-.openerp2 .oe_footer {
-  position: absolute;
-  width: 205px;
-  text-align: center;
-  bottom: 8px;
-}
-.openerp2 .oe_footer a {
-  font-weight: 800;
-  font-family: serif;
-  font-size: 16px;
-  color: black;
-}
-.openerp2 .oe_footer a span {
-  color: #c81010;
-  font-style: italic;
-}
-.openerp2 .oe_menu {
-  float: left;
-  padding: 0;
-  margin: 0;
-}
-.openerp2 .oe_menu li {
-  list-style-type: none;
-  float: left;
-}
-.openerp2 .oe_menu a {
-  display: block;
-  padding: 5px 10px 7px;
-  line-height: 20px;
-  height: 20px;
-  color: #eeeeee;
-  vertical-align: top;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-}
-.openerp2 .oe_menu a:hover {
-  background: #303030;
-  color: white;
-  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-}
-.openerp2 .oe_menu .oe_active {
-  background: #303030;
-  font-weight: bold;
-  color: white;
-  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-}
-.openerp2 .oe_secondary_menu_section {
-  font-weight: bold;
-  margin-left: 8px;
-  color: #8a89ba;
-}
-.openerp2 .oe_secondary_submenu {
-  padding: 2px 0 8px 0;
-  margin: 0;
-  width: 100%;
-  display: inline-block;
-}
-.openerp2 .oe_secondary_submenu li {
-  position: relative;
-  padding: 1px 0 1px 16px;
-  list-style-type: none;
-}
-.openerp2 .oe_secondary_submenu li a {
-  display: block;
-  color: #4c4c4c;
-  padding: 2px 4px 2px 0;
-}
-.openerp2 .oe_secondary_submenu li .oe_menu_label {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  font-size: 10px;
-  background: #8a89ba;
-  color: white;
-  padding: 2px 4px;
-  margin: 1px 6px 0 0;
-  border: 1px solid lightGray;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-  -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-}
-.openerp2 .oe_secondary_submenu .oe_active {
-  background: #8a89ba;
-  border-top: 1px solid lightGray;
-  border-bottom: 1px solid lightGray;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-  -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-}
-.openerp2 .oe_secondary_submenu .oe_active a {
-  color: white;
-}
-.openerp2 .oe_secondary_submenu .oe_active .oe_menu_label {
-  background: #eeeeee;
-  color: #8a89ba;
-  text-shadow: 0 1px 1px white;
-  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  -box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-}
-.openerp2 .oe_secondary_submenu .oe_menu_toggler:before {
-  width: 0;
-  height: 0;
-  display: inline-block;
-  content: "&darr";
-  text-indent: -99999px;
-  vertical-align: top;
-  margin-left: -8px;
-  margin-top: 4px;
-  margin-right: 4px;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 4px solid #4c4c4c;
-  filter: alpha(opacity=50);
-  opacity: 0.5;
-}
-.openerp2 .oe_secondary_submenu .oe_menu_opened:before {
-  margin-top: 6px;
-  margin-left: -12px;
-  margin-right: 4px;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid #4c4c4c;
-}
-.openerp2 .oe_user_menu {
-  float: right;
-  padding: 0;
-  margin: 0;
-}
-.openerp2 .oe_user_menu li {
-  list-style-type: none;
-  float: left;
-}
-.openerp2 .oe_user_menu .oe_dropdown {
-  position: relative;
-}
-.openerp2 .oe_user_menu .oe_dropdown_toggle:after {
-  width: 0;
-  height: 0;
-  display: inline-block;
-  content: "&darr";
-  text-indent: -99999px;
-  vertical-align: top;
-  margin-top: 8px;
-  margin-left: 4px;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid white;
-  filter: alpha(opacity=50);
-  opacity: 0.5;
-}
-.openerp2 .oe_user_menu .oe_dropdown_options {
-  float: left;
-  background: #333333;
-  background: rgba(37, 37, 37, 0.9);
-  display: none;
-  position: absolute;
-  top: 32px;
-  right: -1px;
-  border: 0;
-  z-index: 900;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 6px 0;
-  zoom: 1;
-  border-color: #999999;
-  border-color: rgba(0, 0, 0, 0.2);
-  border-style: solid;
-  border-width: 0 1px 1px;
-  -moz-border-radius: 0 0 6px 6px;
-  -webkit-border-radius: 0 0 6px 6px;
-  border-radius: 0 0 6px 6px;
-  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
-  background-clip: padding-box;
-}
-.openerp2 .oe_user_menu .oe_dropdown_options li {
-  float: none;
-  display: block;
-  background-color: none;
-}
-.openerp2 .oe_user_menu .oe_dropdown_options li a {
-  display: block;
-  padding: 4px 15px;
-  clear: both;
-  font-weight: normal;
-  line-height: 18px;
-  color: #eeeeee;
-}
-.openerp2 .oe_user_menu .oe_dropdown_options li a:hover {
-  background-color: #292929;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
-  background-image: -webkit-linear-gradient(top, #292929, #191919);
-  background-image: -moz-linear-gradient(top, #292929, #191919);
-  background-image: -ms-linear-gradient(top, #292929, #191919);
-  background-image: -o-linear-gradient(top, #292929, #191919);
-  background-image: linear-gradient(to bottom, #292929, #191919);
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  -box-shadow: none;
-}
+  position: relative; }
+  .openerp2 a {
+    text-decoration: none; }
+  .openerp2 .oe_webclient {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0; }
+    .openerp2 .oe_webclient .oe_application {
+      position: absolute;
+      top: 32px;
+      bottom: 0;
+      left: 206px;
+      right: 0; }
+  .openerp2 .oe_content_full_screen .oe_application {
+    top: 0;
+    left: 0; }
+  .openerp2 .oe_content_full_screen .topbar, .openerp2 .oe_content_full_screen .leftbar {
+    display: none; }
+  .openerp2 .oe_topbar {
+    width: 100%;
+    height: 31px;
+    border-top: solid 1px #d3d3d3;
+    border-bottom: solid 1px black;
+    background-color: #646060;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
+    background-image: -webkit-linear-gradient(top, #646060, #262626);
+    background-image: -moz-linear-gradient(top, #646060, #262626);
+    background-image: -ms-linear-gradient(top, #646060, #262626);
+    background-image: -o-linear-gradient(top, #646060, #262626);
+    background-image: linear-gradient(to bottom, #646060, #262626); }
+    .openerp2 .oe_topbar .oe_systray {
+      float: right; }
+    .openerp2 .oe_topbar .oe_systray > div {
+      float: left;
+      padding: 0 4px 0 4px; }
+    .openerp2 .oe_topbar .oe_topbar_item li {
+      float: left; }
+      .openerp2 .oe_topbar .oe_topbar_item li a {
+        display: block;
+        padding: 5px 10px 7px;
+        line-height: 20px;
+        height: 20px;
+        color: #eeeeee;
+        vertical-align: top;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
+        .openerp2 .oe_topbar .oe_topbar_item li a:hover {
+          background: #303030;
+          color: white;
+          -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+          -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+          -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; }
+    .openerp2 .oe_topbar .oe_topbar_item .oe_active {
+      background: #303030;
+      font-weight: bold;
+      color: white;
+      -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+      -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+      -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; }
+    .openerp2 .oe_topbar .oe_topbar_avatar {
+      width: 24px;
+      height: 24px;
+      margin: -2px 2px 0 0;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      border-radius: 4px; }
+    .openerp2 .oe_topbar .oe_topbar_avatar {
+      vertical-align: top; }
+  .openerp2 .oe_leftbar {
+    width: 205px;
+    height: 100%;
+    background: #f0eeee;
+    border-right: 1px solid #afafb6;
+    overflow: auto;
+    text-shadow: 0 1px 1px white; }
+    .openerp2 .oe_leftbar .oe_footer {
+      position: absolute;
+      width: 205px;
+      text-align: center;
+      bottom: 8px; }
+  .openerp2 a.oe_logo {
+    display: block;
+    text-align: center;
+    height: 70px;
+    line-height: 70px; }
+    .openerp2 a.oe_logo img {
+      height: 40px;
+      width: 157px;
+      margin: 14px 0; }
+  .openerp2 .oe_footer {
+    position: absolute;
+    width: 205px;
+    text-align: center;
+    bottom: 8px; }
+    .openerp2 .oe_footer a {
+      font-weight: 800;
+      font-family: serif;
+      font-size: 16px;
+      color: black; }
+      .openerp2 .oe_footer a span {
+        color: #c81010;
+        font-style: italic; }
+  .openerp2 .oe_menu {
+    float: left;
+    padding: 0;
+    margin: 0; }
+    .openerp2 .oe_menu li {
+      list-style-type: none;
+      float: left; }
+    .openerp2 .oe_menu a {
+      display: block;
+      padding: 5px 10px 7px;
+      line-height: 20px;
+      height: 20px;
+      color: #eeeeee;
+      vertical-align: top;
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
+      .openerp2 .oe_menu a:hover {
+        background: #303030;
+        color: white;
+        -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+        -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+        -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; }
+    .openerp2 .oe_menu .oe_active {
+      background: #303030;
+      font-weight: bold;
+      color: white;
+      -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+      -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+      -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; }
+  .openerp2 .oe_secondary_menu_section {
+    font-weight: bold;
+    margin-left: 8px;
+    color: #8a89ba; }
+  .openerp2 .oe_secondary_submenu {
+    padding: 2px 0 8px 0;
+    margin: 0;
+    width: 100%;
+    display: inline-block; }
+    .openerp2 .oe_secondary_submenu li {
+      position: relative;
+      padding: 1px 0 1px 16px;
+      list-style-type: none; }
+      .openerp2 .oe_secondary_submenu li a {
+        display: block;
+        color: #4c4c4c;
+        padding: 2px 4px 2px 0; }
+      .openerp2 .oe_secondary_submenu li .oe_menu_label {
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        font-size: 10px;
+        background: #8a89ba;
+        color: white;
+        padding: 2px 4px;
+        margin: 1px 6px 0 0;
+        border: 1px solid lightGray;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        -moz-border-radius: 4px;
+        -webkit-border-radius: 4px;
+        border-radius: 4px;
+        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+        -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
+    .openerp2 .oe_secondary_submenu .oe_active {
+      background: #8a89ba;
+      border-top: 1px solid lightGray;
+      border-bottom: 1px solid lightGray;
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+      -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
+      .openerp2 .oe_secondary_submenu .oe_active a {
+        color: white; }
+      .openerp2 .oe_secondary_submenu .oe_active .oe_menu_label {
+        background: #eeeeee;
+        color: #8a89ba;
+        text-shadow: 0 1px 1px white;
+        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        -box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
+    .openerp2 .oe_secondary_submenu .oe_menu_toggler:before {
+      width: 0;
+      height: 0;
+      display: inline-block;
+      content: "&darr";
+      text-indent: -99999px;
+      vertical-align: top;
+      margin-left: -8px;
+      margin-top: 4px;
+      margin-right: 4px;
+      border-top: 4px solid transparent;
+      border-bottom: 4px solid transparent;
+      border-left: 4px solid #4c4c4c;
+      filter: alpha(opacity=50);
+      opacity: 0.5; }
+    .openerp2 .oe_secondary_submenu .oe_menu_opened:before {
+      margin-top: 6px;
+      margin-left: -12px;
+      margin-right: 4px;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid #4c4c4c; }
+  .openerp2 .oe_user_menu {
+    float: right;
+    padding: 0;
+    margin: 0; }
+    .openerp2 .oe_user_menu li {
+      list-style-type: none;
+      float: left; }
+    .openerp2 .oe_user_menu .oe_dropdown {
+      position: relative; }
+    .openerp2 .oe_user_menu .oe_dropdown_toggle:after {
+      width: 0;
+      height: 0;
+      display: inline-block;
+      content: "&darr";
+      text-indent: -99999px;
+      vertical-align: top;
+      margin-top: 8px;
+      margin-left: 4px;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid white;
+      filter: alpha(opacity=50);
+      opacity: 0.5; }
+    .openerp2 .oe_user_menu .oe_dropdown_options {
+      float: left;
+      background: #333333;
+      background: rgba(37, 37, 37, 0.9);
+      display: none;
+      position: absolute;
+      top: 32px;
+      right: -1px;
+      border: 0;
+      z-index: 900;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 6px 0;
+      zoom: 1;
+      border-color: #999999;
+      border-color: rgba(0, 0, 0, 0.2);
+      border-style: solid;
+      border-width: 0 1px 1px;
+      -moz-border-radius: 0 0 6px 6px;
+      -webkit-border-radius: 0 0 6px 6px;
+      border-radius: 0 0 6px 6px;
+      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+      -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+      -webkit-background-clip: padding-box;
+      -moz-background-clip: padding-box;
+      background-clip: padding-box; }
+      .openerp2 .oe_user_menu .oe_dropdown_options li {
+        float: none;
+        display: block;
+        background-color: none; }
+        .openerp2 .oe_user_menu .oe_dropdown_options li a {
+          display: block;
+          padding: 4px 15px;
+          clear: both;
+          font-weight: normal;
+          line-height: 18px;
+          color: #eeeeee; }
+          .openerp2 .oe_user_menu .oe_dropdown_options li a:hover {
+            background-color: #292929;
+            background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
+            background-image: -webkit-linear-gradient(top, #292929, #191919);
+            background-image: -moz-linear-gradient(top, #292929, #191919);
+            background-image: -ms-linear-gradient(top, #292929, #191919);
+            background-image: -o-linear-gradient(top, #292929, #191919);
+            background-image: linear-gradient(to bottom, #292929, #191919);
+            -moz-box-shadow: none;
+            -webkit-box-shadow: none;
+            -box-shadow: none; }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 92b8101f2b7..56a735c98fd 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -78,6 +78,15 @@ $colour4: #8a89ba
             right: 0
     // }}}
 
+    // Fullscreen mode {{{
+    .oe_content_full_screen
+        .oe_application
+            top: 0
+            left: 0
+        .topbar, .leftbar
+            display: none
+    // }}
+
     // Topbar {{{
     .oe_topbar
         width: 100%