Cédric Krier
112f35ad02
The split should depend on the height of the screen and not the width because it does not have a scrollbar when it is too long. issue8292 review263371002
662 lines
14 KiB
Plaintext
662 lines
14 KiB
Plaintext
@import "variables";
|
|
@import "mixins";
|
|
|
|
#tablist > li > a {
|
|
border: 0;
|
|
> span {
|
|
max-width: 9em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
/* For IE */
|
|
display: block;
|
|
margin-right: 15px;
|
|
}
|
|
[dir="rtl"] & > span {
|
|
margin-right: 0;
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
#menu, #tabs {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
#menu {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-top: none;
|
|
}
|
|
[dir="rtl"] #menu {
|
|
border-right: none;
|
|
}
|
|
@media screen and (max-width: @screen-sm-max) {
|
|
#menu {
|
|
border-right: none;
|
|
border-left: none;
|
|
border-width: none;
|
|
}
|
|
.active #menu {
|
|
border-width: 1px;
|
|
}
|
|
[dir="rtl"] .active #menu {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: @screen-sm-min) {
|
|
#global-search-entry {
|
|
width: 10em;
|
|
-webkit-transition: width .5s ease;
|
|
-o-transition: width .5s ease;
|
|
transition: width .5s ease;
|
|
|
|
.global-search-container:focus-within & {
|
|
width: 20em;
|
|
}
|
|
}
|
|
}
|
|
|
|
#user-preferences > a {
|
|
max-width: 20em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-row-variant(selected, @state-info-bg);
|
|
.list-group-item-variant(selected, @state-info-bg, @state-info-text);
|
|
|
|
.tab-form, .tab-board {
|
|
nav.toolbar {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0px;
|
|
z-index: @zindex-navbar - 1;
|
|
}
|
|
|
|
.navbar-text {
|
|
.badge {
|
|
max-width: 5em;
|
|
min-width: 5em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.navbar-btn {
|
|
.badge {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
|
|
.tab-domain {
|
|
.badge {
|
|
min-width: 3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 750px) {
|
|
.tab-form, .tab-board {
|
|
.navbar-header > ul {
|
|
min-width: 320px;
|
|
> li {
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.modal-lg {
|
|
.modal-content {
|
|
height: auto;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: @screen-sm-min) {
|
|
.modal-dialog.modal-lg {
|
|
width: auto;
|
|
margin: 30px;
|
|
}
|
|
}
|
|
|
|
input[type='number'] {
|
|
text-align: right;
|
|
text-align: end;
|
|
}
|
|
|
|
input[type='color'] {
|
|
.btn {
|
|
height: @line-height-base;
|
|
}
|
|
.btn-lg {
|
|
height: @line-height-large;
|
|
}
|
|
.btn-sm {
|
|
height: @line-height-small;
|
|
}
|
|
.btn-xs {
|
|
height: @line-height-small;
|
|
}
|
|
}
|
|
|
|
.input-file {
|
|
> input[type='file'] {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
|
|
li& {
|
|
top: auto;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide empty image displayed as broken image */
|
|
img[src=''],
|
|
img:not([src]) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
img.icon {
|
|
height: unit(@line-height-base, em);
|
|
[dir="rtl"] & {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
.filter-box {
|
|
margin: 5px 5px;
|
|
}
|
|
|
|
@media screen and (max-width: @screen-sm-max) {
|
|
.filter-box {
|
|
button[disabled] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-form {
|
|
overflow-y: auto;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.treeview {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
overflow-x: auto;
|
|
|
|
> table.tree {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
|
|
col.selection-state, col.favorite {
|
|
width: 30px;
|
|
}
|
|
|
|
th.selection-state, td.selection-state {
|
|
> input {
|
|
.center-block();
|
|
}
|
|
}
|
|
> thead > tr > th {
|
|
> label.sortable {
|
|
cursor: pointer;
|
|
}
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
&.char, &.text, &.many2one, &.one2one, &.date, &.time, &.selection,
|
|
&.reference, &.url, &.email, &.callto, &.sip {
|
|
text-align: left;
|
|
text-align: start;
|
|
}
|
|
&.timedelta, &.float, &.numeric, &.integer, &.biginteger {
|
|
text-align: right;
|
|
text-align: end;
|
|
}
|
|
}
|
|
> tbody > tr > td {
|
|
cursor: pointer;
|
|
> * {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
td.prefix {
|
|
padding-right: @table-cell-padding;
|
|
[dir="rtl"] & {
|
|
padding-right: 0;
|
|
padding-left: @table-cell-padding;
|
|
}
|
|
}
|
|
td.suffix {
|
|
padding-left: @table-cell-padding;
|
|
[dir="rtl"] & {
|
|
padding-left: 0;
|
|
padding-right: @table-cell-padding;
|
|
}
|
|
}
|
|
img.column-affix, a.column-affix > img {
|
|
width: unit(@line-height-base, em);
|
|
height: unit(@line-height-base, em);
|
|
display: block;
|
|
}
|
|
|
|
tr.more-row {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.editabletree-char, .editabletree-date, .editabletree-datetime,
|
|
.editabletree-integer, .editabletree-float, .editabletree-selection,
|
|
.editabletree-timedelta, .editabletree-boolean, .editabletree-many2one,
|
|
.editabletree-one2many, .editabletree-reference {
|
|
width: 100%;
|
|
|
|
input[type='checkbox'] {
|
|
margin-top: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
> .input-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: @screen-sm-min) {
|
|
.editabletree-reference {
|
|
> .input-sm, > .input-group {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
td {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
&.edited {
|
|
/* We have to define an overflow:visible in order for the
|
|
completion widget to be shown */
|
|
overflow: visible;
|
|
padding: 0 0;
|
|
}
|
|
> .column-text {
|
|
white-space: pre;
|
|
}
|
|
}
|
|
.expander {
|
|
cursor: pointer;
|
|
> img {
|
|
float: left;
|
|
margin-right: 5px;
|
|
[dir="rtl"] & {
|
|
float: right;
|
|
margin-left: 5px;
|
|
}
|
|
width: 1em;
|
|
}
|
|
}
|
|
label {
|
|
font-weight: normal;
|
|
display: inline;
|
|
&.required {
|
|
font-weight: bold;
|
|
}
|
|
&.editable {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
.btn {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-top: -@table-condensed-cell-padding;
|
|
margin-bottom: -@table-condensed-cell-padding;
|
|
}
|
|
}
|
|
|
|
.form {
|
|
width: 100%;
|
|
table.form-container > tbody > tr > td {
|
|
padding: 1px;
|
|
}
|
|
table.form-hcontainer > tbody > tr > td {
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
table.form-vcontainer > tbody > tr > td {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
td.form-label {
|
|
white-space: pre;
|
|
}
|
|
.form-char, .form-password, .form-integer, .form-float, .form-date,
|
|
.form-datetime, .form-time, .form-timedelta, .form-selection,
|
|
.form-multiselection, .form-url, .form-email, .form-callto, .form-sip,
|
|
.form-pyson {
|
|
input, select {
|
|
min-width: 8em;
|
|
}
|
|
}
|
|
.form-many2one, .form-one2one, .form-reference, form-binary {
|
|
select {
|
|
min-width: 8em;
|
|
}
|
|
input {
|
|
min-width: 12em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: @screen-sm-min) {
|
|
.form-reference {
|
|
> .input-sm, > .input-group {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: @screen-xs-max) {
|
|
.form-reference {
|
|
> .input-sm, > .input-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-integer, .form-float {
|
|
input {
|
|
max-width: 8em;
|
|
}
|
|
}
|
|
.form-url, .form-email, .form-callto, .form-sip {
|
|
a > img {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
}
|
|
.form-many2one > .input-group {
|
|
width: 100%;
|
|
}
|
|
td.form-one2many, td.form-many2many {
|
|
vertical-align: top;
|
|
}
|
|
.form-one2many-menu::after, .form-many2many-menu::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.form-one2many-menu, .form-many2many-menu {
|
|
.form-one2many-string, .form-many2many-string {
|
|
display: inline-table;
|
|
float: left;
|
|
margin: 5px;
|
|
[dir="rtl"] & {
|
|
float: right;
|
|
}
|
|
}
|
|
.form-one2many-toolbar, .form-many2many-toolbar {
|
|
display: inline-table;
|
|
float: right;
|
|
[dir="rtl"] & {
|
|
float: left;
|
|
}
|
|
.badge {
|
|
max-width: 5em;
|
|
min-width: 5em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
.form-one2many-content, .form-many2many-content {
|
|
.treeview, .list-form {
|
|
min-height: 100px;
|
|
max-height: 300px;
|
|
}
|
|
}
|
|
.form-richtext {
|
|
> .btn-toolbar {
|
|
min-width: 450px;
|
|
}
|
|
.richtext {
|
|
min-height: 5em;
|
|
}
|
|
}
|
|
.form-separator {
|
|
label {
|
|
margin-top: 10px;
|
|
}
|
|
hr {
|
|
margin-top: 0;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
.form-image_ {
|
|
img {
|
|
width: 4em;
|
|
height: 4em;
|
|
}
|
|
}
|
|
label {
|
|
font-weight: normal;
|
|
display: inline;
|
|
&.required {
|
|
font-weight: bold;
|
|
}
|
|
&.editable {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
.nav-tabs {
|
|
margin-bottom: 15px;
|
|
}
|
|
.panel-heading {
|
|
padding: 1px 1px;
|
|
}
|
|
fieldset.form-group_ > legend {
|
|
font-size: @font-size-base;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.form-binary, .editabletree-binary {
|
|
min-width: calc(5 * 2.4em);
|
|
}
|
|
|
|
.form-integer, .form-float, .form-timedelta,
|
|
.dict-integer, .dict-float, .dict-numeric,
|
|
.editabletree-integer, .editabletree-float, .editabletree-timedelta {
|
|
input {
|
|
text-align: right;
|
|
text-align: end;
|
|
}
|
|
}
|
|
.column-integer, .column-float, .column-timedelta {
|
|
text-align: right;
|
|
text-align: end;
|
|
}
|
|
.column-many2many, .column-one2many {
|
|
text-align: center;
|
|
}
|
|
input.column-boolean {
|
|
.center-block();
|
|
}
|
|
|
|
.form-boolean, .dict-boolean, .editabletree-boolean {
|
|
input[type=checkbox] {
|
|
width: initial;
|
|
}
|
|
}
|
|
|
|
.dict-label {
|
|
text-align: right;
|
|
text-align: end;
|
|
}
|
|
|
|
.calendar {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.graph {
|
|
min-height: 400px;
|
|
}
|
|
|
|
.progress {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.window-form {
|
|
.window-form-toolbar {
|
|
text-align: right;
|
|
text-align: end;
|
|
}
|
|
}
|
|
|
|
.csv {
|
|
.modal-dialog {
|
|
.column-fields {
|
|
max-height: 400px;
|
|
overflow: auto;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-xs-max) {
|
|
.dict-label {
|
|
text-align: left;
|
|
text-align: start;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-xs-max) {
|
|
table.responsive,
|
|
table.responsive > thead,
|
|
table.responsive > thead > tr,
|
|
table.responsive > thead > tr > th:not(.invisible),
|
|
table.responsive > tbody,
|
|
table.responsive > tbody > tr,
|
|
table.responsive > tbody > tr > td:not(.invisible),
|
|
table.responsive > tfoot,
|
|
table.responsive > tfoot > tr,
|
|
table.responsive > tfoot > tr > td:not(.invisible) {
|
|
display: block !important;
|
|
}
|
|
table.responsive {
|
|
/* Hide table headers (but not display: none; for accessiblity) */
|
|
> thead > tr {
|
|
position: absolute;
|
|
top: -9999px;
|
|
left: -9999px;
|
|
}
|
|
> thead > tr,
|
|
> tbody > tr > td {
|
|
text-align: left !important;
|
|
text-align: start !important;
|
|
/* Force height to empty content */
|
|
& > span:empty {
|
|
min-height: calc(@line-height-computed + @table-condensed-cell-padding);
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
tfoot {
|
|
> tr > td:empty,
|
|
> tr > td > label {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
table.responsive-noheader {
|
|
> tbody > tr > td {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
table.responsive-header {
|
|
> tbody > tr {
|
|
border: 1px solid #ccc;
|
|
}
|
|
> tbody > tr > td,
|
|
> tfoot > tr > td {
|
|
/* Behave like a "row" */
|
|
border: none;
|
|
border-bottom: 1px solid #eee;
|
|
position: relative;
|
|
}
|
|
> tbody > tr,
|
|
> tfoot > tr {
|
|
> td:before {
|
|
/* Now like a table header */
|
|
position: absolute;
|
|
/* Top/left values mimic padding */
|
|
top: @table-condensed-cell-padding;
|
|
left: @table-condensed-cell-padding;
|
|
padding-right: calc(@table-condensed-cell-padding * 2);
|
|
[dir="rtl"] & {
|
|
left: unset;
|
|
right: @table-condensed-cell-padding;
|
|
padding-right: 0;
|
|
padding-left: calc(@table-condensed-cell-padding * 2);
|
|
}
|
|
text-align: left;
|
|
text-align: start;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* Label */
|
|
content: attr(data-title);
|
|
}
|
|
> td.required:before {
|
|
font-weight: bold;
|
|
}
|
|
> td.editable:before {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#processing {
|
|
position: fixed;
|
|
top: 0px;
|
|
width: 100%;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.infobar {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
min-width: 50%;
|
|
}
|
|
|
|
img.global-search-icon {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
img.favorite-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|