Files
iTop/css/light-grey.scss
2018-09-14 17:26:06 +02:00

3339 lines
64 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@import 'css-variables.scss';
$hilight-color: $highlight-color;
$summary-details-background: $grey-color;
$main-header-background: $frame-background-color;
$table-even-background: $frame-background-color;
$popup-menu-highlight-color: $highlight-color;
$popup-menu-text-color: #000;
$popup-menu-background-color: #fff;
$popup-menu-text-higlight-color: #fff;
$breadcrumb-color: #555;
$breadcrumb-text-color: #fff;
$breadcrumb-highlight-color: $highlight-color;
$breadcrumb-text-highlight-color: #fff;
/* CSS Document */
body {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 10pt;
color: $text-color;
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
}
body.printable-version {
margin:1.5em;
overflow:auto;
}
/* to prevent flicker, hide the pane's content until it's ready */
.ui-layout-center, .ui-layout-north, .ui-layout-south {
display: none;
}
.ui-layout-content {
padding-left: 10px;
}
.ui-layout-content .ui-tabs-nav li {
/* Overriding jQuery UI theme to see active tab better */
margin-bottom: 2px;
&.ui-tabs-active{
padding-bottom: 3px;
}
}
.raw_output {
font-family: Courier-New, Courier, Arial, Helvetica;
font-size: 8pt;
background-color: #eeeeee;
color: $text-color;
border: 1px dashed $text-color;
padding: 0.25em;
margin-top: 1em;
}
h1 {
font-family: Tahoma, Verdana, Arial, Helvetica;
color: $text-color;
font-weight: bold;
font-size: 12pt;
}
h2 {
font-family: Tahoma, Verdana, Arial, Helvetica;
color: $text-color;
font-weight: normal;
font-size: 12pt;
}
h3 {
font-family: Tahoma, Verdana, Arial, Helvetica;
color: $text-color;
font-weight: normal;
font-size: 10pt;
}
label {
cursor: pointer;
}
.hilite, .hilite a, .hilite a:visited {
color: $hilight-color;
text-decoration: none;
}
table.datatable {
width: 100%;
border: 0;
padding: 0;
}
td.menucontainer {
text-align: right;
}
table.listResults {
padding: 0px;
border-top: 3px solid $frame-background-color;
border-left: 3px solid $frame-background-color;
border-bottom: 3px solid #e6e6e1;
border-right: 3px solid #e6e6e1;
width: 100%;
background-color: #fff;
}
table.listResults td {
padding: 2px;
}
table.listResults td .view-image {
// Counteract the forced dimensions (usefull for displaying in the details view)
width: inherit !important;
height: inherit !important;
img {
max-width: 48px !important;
max-height: 48px !important;
display: block;
margin-left: auto;
margin-right: auto;
}
}
table.listResults > tbody > tr.selected > * {
}
table.listResults > tbody > tr > * {
transition: background-color 400ms linear;
}
table.listResults > tbody > tr:hover > * {
cursor: pointer;
}
table.listResults > tbody > tr.selected:hover > * {
/* hover on lines is currently done toggling td.hover, and having a rule for links */
background-color: lighten($combodo-orange, 20%);
color: $text-color;
}
table.listResults > tbody > tr:hover > * {
/* hover on lines is currently done toggling td.hover, and having a rule for links */
background-color: #fdf5d0;
color: $text-color;
}
.edit-image {
.view-image {
display: inline-block;
img[src=""],
img[src="null"] {
// Hiding "broken" image when src is not set
visibility: hidden;
}
&.dirty {
// The image will be modified when saving the changes
&.compat {
// Browser not supporting FileReader
background-image: url("ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png");
img {
opacity: 0.3;
}
}
}
}
.edit-buttons {
display: inline-block;
vertical-align: top;
margin-top: 4px;
margin-left: 3px;
.button {
cursor: pointer;
margin-bottom: 3px;
padding: 2px;
background-color: $highlight-color;
&.disabled {
cursor: default;
background-color: $grey-color;
opacity: 0.3;
}
.ui-icon {
background-image: url("ui-lightness/images/ui-icons_ffffff_256x240.png");
}
}
}
.file-input {
display: block;
}
}
/* Center the image both horizontally and vertically, withing a box which size is fixed (depends on the attribute definition) */
.details .view-image {
text-align: center;
padding: 2px;
border: 2px solid #DDDDDD;
border-radius: 6px;
img {
display: inline-block;
vertical-align: middle;
max-width: 90% !important;
max-height: 90% !important;
}
.helper-middle {
// Helper to center the image (requires a span dedicated to this)
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
table.listContainer {
border: 0;
padding: 0;
margin: 0;
width: 100%;
clear: both;
}
tr.containerHeader, tr.containerHeader td {
background: transparent;
}
tr.even td, .wizContainer tr.even td {
background-color: $table-even-background;
}
tr.red_even td, .wizContainer tr.red_even td {
background-color: #f97e75;
color: #fff;
}
tr.red td, .wizContainer tr.red td {
background-color: #f9a397;
color: #fff;
}
tr.orange_even td, .wizContainer tr.orange_even td {
background-color: #f4d07a;
}
tr.orange td, .wizContainer tr.orange td {
background-color: #f4e96c;
}
tr.green_even td, .wizContainer tr.green_even td {
background-color: #bee5a3;
}
tr.green td, .wizContainer tr.green td {
background-color: #b3e5b4;
}
tr td.hover, tr.even td.hover, .hover a, .hover a:visited, .hover a:hover, .wizContainer tr.even td.hover, .wizContainer tr td.hover {
//background-color: #fdf5d0;
color: $text-color;
}
th {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 8pt;
color: $complement-color;
height:20px;
background: $frame-background-color bottom repeat-x;
}
th.header {
cursor: pointer;
background-repeat: no-repeat;
background-position: center right;
background-repeat: no-repeat;
padding-right: 16px; // some space for the asc/desc icons
}
th.headerSortUp {
background-image: url(../images/asc.gif);
text-decoration: underline;
cursor: pointer;
}
th.headerSortDown {
background-image: url(../images/desc.gif);
text-decoration: underline;
cursor: pointer;
}
td {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 12px;
color:#696969;
nobackground-color: #ffffff;
padding: 0px;
}
tr.clicked td {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: smaller;
background-color: #ffcfe8;
}
td.label {
vertical-align: top;
}
td.label span {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 12px;
color: #000000;
padding: 5px;
padding-right: 10px;
font-weight:bold;
vertical-align: top;
text-align: right;
display: block;
}
fieldset td.label span {
padding: 3px;
padding-right: 10px;
}
fieldset {
margin-top: 3px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border-style: solid;
border-color: #ddd;
}
legend {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 12px;
padding:8px;
color: #fff;
background-color: $complement-color;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
legend.transparent {
background: transparent;
color: #333333;
font-size: 1em;
font-weight: normal;
padding: 0;
}
.ui-widget-content td legend a, .ui-widget-content td legend a:hover, .ui-widget-content td legend a:visited {
color: #fff;
}
.ui-widget-content td a, p a, p a:visited, td a, td a:visited {
text-decoration:none;
color: $complement-color;
}
.ui-widget-content td a.cke_button, .ui-widget-content td a.cke_toolbox_collapser, .ui-widget-content td a.cke_combo_button, cke_dialog a {
padding-left: 0;
background-image: none;
}
.ui-widget-content td a:hover, p a:hover, td a:hover {
text-decoration:underline;
color:$highlight-color;
}
.cke_reset_all *:hover {
text-decoration: none;
color: #000;
}
table.cke_dialog_contents a.cke_dialog_ui_button_ok {
color: #000;
border-color: $highlight-color;
background: $highlight-color;
}
.cke_notifications_area {
display: none;
}
td a.no-arrow, td a.no-arrow:visited, .SearchDrawer a.no-arrow, .SearchDrawer a.no-arrow:visited {
text-decoration:none;
color:#000000;
padding-left:0px;
background: inherit;
}
td a.no-arrow:hover {
text-decoration:underline;
color:#d81515;
padding-left:0px;
background: inherit;
}
td a,
td a:visited{
&:hover{
.text_decoration{
color: darken($highlight-color, 6%);
}
}
.text_decoration{
vertical-align: baseline;
text-decoration: none;
color: $highlight-color;
margin-right: 8px;
transition: color 0.2s ease-in-out;
}
}
a.small_action {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 8pt;
color: #000000;
text-decoration:none;
}
.display_block {
padding:0.25em;
}
.actions_details {
float:right;
margin-top:10px;
margin-right:10px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
background: $highlight-color url(../images/actions_left.png?v=#{$version}) no-repeat left;
}
.actions_details span{
background: url(../images/actions_right.png?v=#{$version}) no-repeat right;
color: #fff;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 12px;
}
.actions_details a {
text-decoration:none;
}
.loading {
noborder: 1px dashed #CCC;
background: #b9c1c8;
padding:0.25em;
}
input.textSearch {
border:1px solid #000;
font-family:Tahoma,Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
.ac_input {
border: 1px solid #7f9db9;
background: #fff url(../images/ac-background.gif) no-repeat right;
}
/* By Rom */
.csvimport_createobj {
color: #AA0000;
background-color:#EEEEEE;
}
.csvimport_error {
font-weight: bold;
color: #FF0000;
background-color:#EEEEEE;
}
.csvimport_warning {
color: #CC8888;
background-color:#EEEEEE;
}
.csvimport_ok {
color: #00000;
background-color:#BBFFBB;
}
.csvimport_reconkey {
font-style: italic;
color: #888888;
background-color:#FFFFF;
}
.csvimport_extreconkey {
color: #888888;
background-color:#FFFFFF;
}
#accordion {
display:none;
}
#accordion h3 {
padding: 10px;
}
.ui-accordion-content ul {
list-style:none;
list-style-image: url(data:0);
padding-left:16px;
margin-top: 8px;
}
.ui-accordion-content li.submenu {
margin-top: 8px;
}
.ui-accordion-content ul ul {
padding: 8px 0px 8px 8px;
margin:0;
list-style:none;
list-style-image: url(data:0);
border: 0;
}
.nothing {
noborder-top: 1px solid #8b8b8b;
padding: 4px 0px 0px 16px;
font-size:8pt;
background: url(../images/green-square.gif) no-repeat bottom left;
color:#83b217;
font-weight:bold;
text-decoration:none;
}
div.ui-accordion-content {
padding-top: 10px;
padding-left: 10px;
}
.ui-accordion-content a, ui-accordion-content a:visited {
color: $complement-color;
text-decoration:none;
}
.ui-accordion-content a:hover {
color: $highlight-color;
text-decoration: none;
}
.ui-accordion-content ul {
padding-left: 0;
margin-top: 0;
}
.ui-accordion-content li {
color:$grey-color;
text-decoration:none;
margin: 0;
padding: 0px 0pt 0px 16px;
font-size: 9pt;
background: url(../images/mini-arrow-orange.gif) no-repeat top left;
font-weight:normal;
border: 0;
}
a.CollapsibleLabel, td a.CollapsibleLabel {
margin: 0;
padding: 0px 0pt 0px 16px;
font-size:8pt;
text-decoration:none;
color:$grey-color;
background: url(../images/mini-arrow-orange.gif) no-repeat left;
}
/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
a.CollapsibleLabel.open, td a.CollapsibleLabel.open {
margin: 0;
padding: 0px 0pt 0px 16px;
font-size:8pt;
text-decoration:none;
color: $highlight-color;
background: url(../images/mini-arrow-orange-open.gif) no-repeat left;
}
.page_header {
background-color:$frame-background-color;
padding:5px;
}
/* move up a header immediately following a display block (i.e. "actions" menu) */
.display_block + .page_header {
margin-top: -8px;
}
.notreeview li { background: url(../images/tv-item.gif) 0 0 no-repeat; }
.notreeview .collapsable { background-image: url(../images/tv-collapsable.gif); }
.notreeview .expandable { background-image: url(../images/tv-expandable.gif); }
.notreeview .last { background-image: url(../images/tv-item-last.gif); }
.notreeview .lastCollapsable { background-image: url(../images/tv-collapsable-last.gif); }
.notreeview .lastExpandable { background-image: url(../images/tv-expandable-last.gif); }
#OrganizationSelection {
padding:5px 0px 16px 20px;
}
/* popup menus */
div.itop_popup {
margin: 0;
padding: 0;
float:right;
}
div.itop_popup > ul > li {
list-style: none;
cursor: pointer;
position: relative;
}
div.actions_menu > ul {
height:19px;
line-height: 17px;
vertical-align: middle;
display:block;
nowidth:70px; /* Nasty work-around for IE... en attendant mieux */
padding-left: 5px;
background: $highlight-color url(../images/actions_left.png?v=#{$version}) no-repeat top left;
cursor: pointer;
margin: 0;
}
div.actions_menu > ul > li {
float: left;
list-style: none;
font-size: 11px;
font-family: Tahoma,sans-serif;
height: 17px;
padding-right: 16px;
padding-left: 4px;
background: url(../images/actions_right.png?v=#{$version}) no-repeat top right transparent;
font-weight: bold;
color: $popup-menu-text-higlight-color;
vertical-align: middle;
margin: 0;
}
#logOffBtn > ul > li {
list-style: none;
vertical-align: middle;
margin: 0;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
}
#logOffBtn > ul {
list-style: none;
vertical-align: middle;
margin: 0;
padding: 0;
height: 25px;
}
.itop_popup li a, #logOffBtn li a {
display: block;
padding: 5px 12px;
text-decoration: none;
nowidth: 70px;
color: $popup-menu-text-color;
font-weight: bold;
white-space: nowrap;
background: $popup-menu-background-color;
}
#logOffBtn li span {
display: block;
padding: 5px 12px;
text-decoration: none;
nowidth: 70px;
color: $popup-menu-text-color;
white-space: nowrap;
background: $popup-menu-background-color;
}
.itop_popup ul {
padding-left: 0;
}
.menucontainer div.toolkit_menu {
margin-left: 10px;
}
.itop_popup li a:hover, #logOffBtn li a:hover {
background: #1A4473;
}
.itop_popup ul > li > ul, #logOffBtn ul > li > ul
{
border: 1px solid black;
background: #fff;
}
.itop_popup li > ul, #logOffBtn li > ul
{ margin: 0;
padding: 0;
position: absolute;
display: none;
border-top: 1px solid white;
z-index: 1500;
}
.itop_popup li ul li, #logOffBtn li ul li {
float: none;
display: inline;
}
.itop_popup li ul li a, #logOffBtn li ul li a {
width: auto;
text-align: left;
}
.itop_popup li ul li a:hover, #logOffBtn li ul li a:hover{
background: $popup-menu-highlight-color;
color: $popup-menu-text-higlight-color;
font-weight: bold;
}
.itop_popup > ul {
margin: 0;
}
hr.menu-separator {
border: none 0;
border-top: 1px solid #ccc;
color: #ccc;
background-color: transparent;
height: 1px;
margin: 3px;
cursor: default;
}
/************************************/
.wizHeader {
background: $complement-color;
padding: 15px;
}
.wizContainer {
border: 5px solid $complement-color;
background: $complement-light;
padding: 5px;
}
.wizContainer table tr td {
background: transparent;
}
.alignRight {
text-align: right;
padding: 3px;
}
.alignLeft {
text-align: left;
padding: 3px;
}
.red {
background-color: #ff6000;
color: #000;
}
th.red {
background: url(../images/red-header.gif) bottom left repeat-x;
color: #000;
}
.green {
background-color: #00cc00;
color: #000;
}
th.green {
background: url(../images/green-header.gif) bottom left repeat-x;
color: #000;
}
.orange {
background-color: #ffde00;
color: #000;
}
th.orange {
background: url(../images/orange-header.gif) bottom left repeat-x;
color: #000;
}
/* For Date Picker: Creates a little calendar icon
* instead of a text link for "Choose date"
*/
td a.dp-choose-date, a.dp-choose-date, td a.dp-choose-date:hover, a.dp-choose-date:hover, td a.dp-choose-date:visited, a.dp-choose-date:visited {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar.png?v=#{$version}) no-repeat;
}
td a.dp-choose-date.dp-disabled, a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
/* For Date Picker: makes the input field shorter once the date picker code
* has run (to allow space for the calendar icon)
*/
input.dp-applied {
width: 140px;
float: left;
}
/* For search forms */
.mini_tabs a {
text-decoration: none;
font-weight:bold;
color: #ccc;
background-color:#333;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.25em;
}
.mini_tabs a.selected {
color: #fff;
background-color: $complement-color;
padding-top: 0.25em;
}
.mini_tabs ul {
margin: -10px;
}
.mini_tabs ul li {
float: right;
list-style: none;
nopadding-left: 1em;
nopadding-right: 1em;
margin-top: 0;
}
/* Search forms v2 */
.search_box{
box-sizing: border-box;
position: relative;
z-index: 1100; /* To be over the table block/unblock UI. Not very sure about this. */
text-align: center; /* Used when form is closed */
/* Sizing reset */
*{
box-sizing: border-box;
}
}
.search_form_handler{
position: relative;
z-index: 10;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 12px;
text-align: left; /* To compensate .search_box:text-align */
border: 1px solid $complement-color;
//transition: width 0.3s ease-in-out;
/* Sizing reset */
*{
box-sizing: border-box;
}
/* Hyperlink reset */
a{
color: inherit;
text-decoration: none;
}
/* Input reset */
input[type="text"],
select{
padding: 1px 2px;
}
&:not(.closed){
.sf_title{
.sft_short{
display: none;
}
.sft_hint,
.sft_toggler{
margin-top: 4px;
}
.sft_toggler{
transform: rotateX(180deg);
transition: transform 0.5s linear;
}
}
}
&.closed{
margin-bottom: 0.5em;
width: 150px;
overflow: hidden;
border-radius: 4px;
background-color: $complement-color;
.sf_criterion_area{
height: 0;
opacity: 0;
padding: 0;
}
.sf_title {
padding: 6px 8px;
text-align: center;
font-size: 12px;
.sft_long{
display: none;
}
.sft_hint{
display: none;
}
}
}
&:not(.no_auto_submit){
.sft_hint{
display: none;
}
.sfc_fg_apply{
display: none;
}
}
&.no_auto_submit{
.sfc_fg_search{
display: none;
}
}
.sf_title{
transition: opacity 0.3s, background-color 0.3s, color 0.3s linear;
padding: 8px 10px;
margin: 0;
color: #ffffff;
background-color: $complement-color;
cursor: pointer;
.sft_hint{
font-size: 8pt;
font-style: italic;
}
.sft_toggler{
margin-left: 0.7em;
transition: color 0.2s ease-in-out, transform 0.4s ease-in-out;
&:hover{
color: $gray-extra-light;
}
}
}
.sf_message{
display: none;
margin: 8px 8px 0px 8px;
border-radius: 0px;
}
.sf_criterion_area{
/*display: none;*/
padding: 8px 8px 3px 8px; /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
background-color: $white;
.sf_criterion_row{
position: relative;;
&:not(:first-child){
margin-top: 20px;
&::before{
content: "";
position: absolute;
top: -12px;
left: 0px;
width: 100%;
border-top: 1px solid $search-criteria-box-border-color;
}
&::after{
content: "or"; /* TODO: Make this into a dict entry */
position: absolute;
top: -20px;
left: 8px;
padding-left: 5px;
padding-right: 5px;
color: $gray-light;
background-color: $white; /* Must match .sf_criterion_area:background-color */
}
}
.sf_criterion_group{
display: inline;
}
}
/* Common style between criterion and more criterion */
.search_form_criteria,
.sf_more_criterion,
.sf_button{
position: relative;
display: inline-block;
margin-right: 10px;
margin-bottom: 5px;
vertical-align: top;
&.opened{
margin-bottom: 0px; /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
.sfc_header,
.sfm_header{
border-bottom: none !important;
box-shadow: none !important;
padding-bottom: 13px; /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */
}
}
> *{
padding: 7px 8px;
vertical-align: top;
border: $search-criteria-box-border;
border-radius: $search-criteria-box-radius;
box-shadow: $box-shadow-regular;
}
.sfc_form_group,
.sfm_content{
position: absolute;
z-index: -1;
min-width: 100%;
left: 0px;
margin-top: -1px;
.sfc_fg_buttons{
white-space: nowrap;
}
}
}
/* Criteria tags */
.search_form_criteria{
/* Non editable criteria */
&.locked{
background-color: $gray-extra-light;
.sfc_title{
user-select: none;
cursor: initial;
}
}
/* Draft criteria (modifications not applied) */
&.draft{
.sfc_header,
.sfc_form_group{
border-style: dashed;
}
.sfc_title{
font-style: italic;
}
}
/* Opened criteria (form group displayed) */
&.opened{
z-index: 1; /* To be over other criterion */
.sfc_toggle{
transform: rotateX(-180deg);
}
.sfc_form_group{
display: block;
}
}
&.opened_left{
.sfc_form_group{
left: auto;
right: 0px;
}
}
/* Add "and" on criterion but the one and submit button */
&:not(:last-of-type){
margin-right: 30px;
&::after{
/* TODO: Find an elegant way to do this, without hardcoding the content (could be a <style> in the markup) and margin. Note, only a few languages (hawaiian and stuff like this have more than 4 letters in for "and" word. */
content: "and";
position: absolute;
top: 8px;
left: calc(100% + 0px);
margin-right: 5px;
margin-left: 5px;
text-align: center;
color: $gray-light;
}
}
> *{
background-color: $search-criteria-box-bg-color;
color: $search-criteria-box-color;
}
/* Top left corner icons */
.sfc_toggle,
.sfc_close{
position: absolute;
top: 7px;
color: $search-criteria-box-picto-color;
}
.sfc_locked{
position: absolute;
top: 9px;
color: $gray-light;
}
.sfc_toggle{
display: inline-block;
right: 23px;
transition: all 0.3s ease-in-out;
}
.sfc_close,
.sfc_locked{
right: 7px;
}
.sfc_title{
max-width: 240px;
padding-right: 30px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
cursor: pointer;
.sfc_values {
font-weight: bold;
}
}
.sfc_form_group{
/* Form group (operators) is displayed only when the criteria is toggled to opened state */
display: none;
max-height: 520px;
overflow: auto;
.sfc_fg_operators{
font-size: 12px;
.sfc_fg_operator{
&.force_hide {
display: none !important;
}
> label{
line-height: 20px;
white-space: nowrap;
> *{
display: inline-block;
vertical-align: middle;
}
}
.sfc_op_radio{
width: 12px;
margin: 0px;
margin-right: 7px;
}
.sfc_op_name{
width: 90px;
}
.sfc_op_content{
input[type="text"]{
width: 160px;
}
}
.sfc_opc_multichoices{
label > input{
vertical-align: middle;
margin-left: 0px;
margin-right: 8px;
}
.sfc_opc_mc_toggler{
}
.sfc_opc_mc_items_wrapper{
max-height: 415px; /* Must be less than .sfc_form_group:max-height - .sfc_opc_mc_toggler:height - .sfc_opc_mc_filter:height */
overflow-y: auto;
margin: 0px -8px; /* Compensate .sfc_opc_multichoices side padding so the hover style can take the full with */
.sfc_opc_mc_items{
.sfc_opc_mc_items_list{
&.sfc_opc_mc_items_selected{
position: relative;
padding-top: 5px;
margin-top: 5px;
&::before{
content: "";
position: absolute;
border-top: 1px solid $gray-lighter;
width: calc(100% - 12px); /* minus margin-left x2 */
margin-left: 6px;
top: 0px;
}
}
.sfc_opc_mc_placeholder{
padding: 15px 8px;
font-style: italic;
text-align: center;
}
.sfc_opc_mc_item{
padding: 4px 8px; /* Putting back the padding remove by .sfc_opc_mc_items */
&:hover{
background-color: $search-criteria-box-hover-color;
}
label{
display: inline-block;
width: 100%;
}
}
}
}
.sfc_opc_mc_items_hint{
margin-top: 15px;
margin-bottom: 15px;
padding-left: 9px;
padding-right: 9px;
color: $gray;
font-size: 10px;
font-style: italic;
> span{
margin-right: 0.5em;
font-style: italic;
}
}
}
}
}
}
.sfc_fg_search,
.sfc_fg_apply,
.sfc_fg_cancel{
margin-top: 8px;
padding: 3px 6px;
font-size: 11px; /* Not bold, so it looks like 10px/bold of more/less buttons */
}
.sfc_fg_search,
.sfc_fg_apply{
margin-right: 5px;
}
.sfc_fg_more,
.sfc_fg_less{
position: absolute;
bottom: 4px;
right: 0px;
cursor: pointer;
color: #3F7294;
font-size: 10px;
font-weight: bold;
border: none;
background-color: transparent;
> span{
margin-left: 3px;
}
}
/* Show only first operator in simple mode */
.sfc_fg_operator:not(:first-of-type),
.sfc_fg_operator:first-of-type .sfc_op_radio{
display: none;
}
.sfc_fg_less{
display: none;
}
.sfc_fg_more{
display: inline-block;
}
/* Show all operators in advanced mode */
&.advanced{
.sfc_fg_operator{
margin-bottom: 3px;
&:last-of-type{
margin-bottom: 0px;
}
}
.sfc_fg_operator:not(:first-of-type),
.sfc_fg_operator:first-of-type .sfc_op_radio{
display: inherit;
}
.sfc_fg_less{
display: inline-block;
}
.sfc_fg_more{
display: none;
}
.hide_on_advanced {
display: none;
}
}
&:not(.advanced) {
.hide_on_less {
display: none;
}
}
}
/* Special criterion processing */
&.search_form_criteria_raw{
> *{
border-color: transparent;
}
.sfc_title{
cursor: initial;
padding-right: 20px; /* Less than regular as there is no toggle icon */
}
.sfc_form_group{
display: none;
}
}
&.search_form_criteria_enum{
.sfc_form_group{
.sfc_fg_operator_in{
> label{
display: inline-block;
width: 100%;
line-height: initial;
white-space: nowrap;
.sfc_op_content{
width: 100%;
}
}
}
}
}
&.search_form_criteria_tag_set{
.sfc_form_group{
.sfc_fg_operator_in{
> label{
display: inline-block;
width: 100%;
line-height: initial;
white-space: nowrap;
.sfc_op_content{
width: 100%;
}
}
}
}
}
&.search_form_criteria_numeric {
//.sfc_form_group.advanced {
// .sfc_fg_operator_between {
// margin-top: 5px;
// margin-bottom: 5px;
// }
//}
.sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_between {
.sfc_op_content_from_outer{
display: inline;
}
.sfc_op_content_until_outer {
display: inline;
margin-left: 5px;
}
label {
&.sfc_op_content_from_label, &.sfc_op_content_until_label {
width: 45px;
display: inline-block;
}
}
input[type="text"] {
width: 77px;
}
}
}
&.search_form_criteria_date_time,
&.search_form_criteria_date {
.sfc_form_group.advanced {
.sfc_fg_operator_between {
margin-bottom: 5px;
}
}
.sfc_fg_operator_between_days {
input {
width: 135px;
}
}
button.ui-datepicker-trigger {
background: none;
border: none;
height: 100%;
padding: 2px;
img {
vertical-align: middle;
}
}
}
}
/* More criterion */
.sf_more_criterion{
&.opened{
z-index: 2; /* To be over criterion */
.sfm_content{
display: inherit;
}
}
&.opened_left{
.sfm_content{
left: auto;
right: 0px;
}
}
> *{
background-color: $search-add-criteria-box-bg-color;
color: $search-add-criteria-box-color;
}
.sfm_toggler{
.sfm_tg_title{
margin-right: 7px;
}
.sfm_tg_icon{
color: $search-criteria-box-picto-color;
}
}
.sfm_content{
display: none;
min-width: 200px; /* To avoid element going to thin on filter, not very slick */
.sfm_lists{
margin: 0px -8px;
padding: 0px 8px;
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
.sfl_items{
> li{
&:hover{
background-color: $search-add-criteria-box-hover-color;
}
}
}
}
.sfm_buttons{
display: none;
button{
margin-top: 8px;
margin-right: 5px;
padding: 3px 6px;
font-size: 11px;
&:last-of-type{
margin-right: 0px;
}
}
}
}
}
/* Misc. buttons */
.sf_button{
cursor: pointer;
> *{
background-color: $search-button-box-bg-color;
color: $search-button-box-color;
}
}
}
/* List helpers */
.sf_list{
&:not(:first-of-type){
.sfl_title{
border-top: 1px solid $gray-lighter;
padding-top: 8px;
margin-top: 5px;
}
}
.sfl_title{
font-weight: bold;
}
.sfl_items{
margin: 5px -8px 0px -8px;
padding: 0px;
> li{
padding: 4px 8px;
list-style: none;
white-space: nowrap;
&:hover{
background-color: $white;
}
&.sfl_i_placeholder{
font-style: italic;
opacity: 0.8;
}
> label{
display: inline-block;
width: 100%;
> *{
vertical-align: middle;
}
> input[type="checkbox"]{
margin-left: 0px;
margin-right: 8px;
}
}
}
}
}
.sf_filter{
position: relative;
margin-top: 8px;
margin-bottom: 8px;
input,
button,
.sff_picto{
vertical-align: middle;
height: 22px;
}
input,
button{
border: 1px solid #ABABAB;
}
input{
width: 100% !important;
}
button{
width: 23px; /* Must be equals to .sf_filter > *:height */
background-color: $white;
color: $combodo-orange;
font-size: 10px;
&:first-of-type{
margin-left: 5px;
}
&:not(:first-of-type){
border-left: transparent;
}
}
.sff_input_wrapper{
position: relative;
.sff_picto{
position: absolute;
right: 5px;
top: 2px;
opacity: 0.6;
user-select: none;
}
.sff_reset{
display: none;
}
input::-ms-clear {
display: none;
}
}
&.sf_with_buttons{
input{
width: calc(100% - 28px) !important; /* Minus button outter width (only one for now) */
min-width: 120px;
}
}
}
}
.sf_results_area{
.sf_results_placeholder{
margin-top: 100px;
text-align: center;
button > span{
margin-left: 0.5em;
}
}
}
.hidden{
display: none !important;
}
.visible{
display: initial !important;
}
.mandatory {
border: 1px solid #f00;
}
/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
table.listResults tr.odd td.truncated, table.listResults tr td.truncated, .wizContainer table.listResults tr.odd td.truncated, .wizContainer table.listResults tr td.truncated {
background: url(../images/truncated.png?v=#{$version}) bottom repeat-x;
}
/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
table.listResults tr.even td.truncated, .wizContainer table.listResults tr.even td.truncated {
background: #f9f9f1 url(../images/truncated.png?v=#{$version}) bottom repeat-x;
}
/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
table.listResults tr.even td.hover.truncated, .wizContainer table.listResults tr.even td.hover.truncated {
background: #fdf5d0 url(../images/truncated.png?v=#{$version}) bottom repeat-x;
}
/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
table.listResults tr.odd td.hover.truncated, table.listResults tr td.hover.truncated, .wizContainer table.listResults tr.odd td.hover.truncated, .wizContainer table.listResults tr td.hover.truncated {
background: #fdf5d0 url(../images/truncated.png?v=#{$version}) bottom repeat-x;
}
table.listResults.truncated {
border-bottom: 0;
padding-bottom: 0;
}
tr.csv_row0 td {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
background: #fff;
border-left: #000 1px solid;
}
tr.csv_row1 td {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
background: #f9f9f1;
border-left: #000 1px solid;
}
tr.csv_row1 th, tr.csv_row0 th {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
border-left: #000 1px solid;
}
td.cell_modified {
font-weight: bold;
color: #000;
}
td.cell_error {
font-weight: bold;
color: #D81515;
}
table.transparent, table.transparent td {
background: transparent;
}
p.page-header {
color:$complement-color;
font-weight: bold;
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, Sans-Serif
}
td.dashboard {
vertical-align:top;
border: 1px solid #ccc;
padding: 0.5em;
width: 50%;
}
.white {
background-color: #fff;
}
/*** New Lacanau layout ***/
.ui-layout-pane { /* all 'panes' */
overflow: auto;
}
.ui-layout-resizer { /* all 'resizer-bars' */
background: #f1f1f1;
}
.ui-layout-toggler { /* all 'toggler-buttons' */
background: #AAA;
}
div#top-left {
width: 28px;
height: 70px;
background: $frame-background-color;
float:left;
}
div#header-logo {
width: 100%;
height: 70px;
background: $frame-background-color;
}
.ui-layout-pane-west {
background: $frame-background-color;
}
div#right {
min-width: 260px;
}
div#menu {
width: 100%;
overflow: auto;
}
.header-menu {
padding-left: 24px;
padding-right: 8px;
padding-bottom: 24px;
background: transparent;
}
div#inner_menu {
padding-left: 24px;
padding-right: 8px;
background: transparent;
}
div#logo {
height: 70px;
nowidth: 100%;
text-align: center;
}
div#logo div {
height: 88px;
width: 244px;
background: url(../images/itop-logo-2.png?v=#{$version}) left no-repeat;
}
#left-pane .ui-layout-north {
overflow: hidden;
}
#top-bar {
background: $frame-background-color;
text-align: right;
}
.app-banner {
}
.app-message {
float: left;
margin-top: 2px;
margin-right: 4px;
padding: 6px 9px;
background-color: $highlight-color;
color: white;
border-radius: 6px;
text-align: left;
}
.app-message-icon {
margin-right: 5px;
}
.app-message-body {
}
.fa-sm {
font-size: 0.66em;
}
.object-details-header {
margin-top: 7px;
margin-bottom: 7px;
}
.object-icon {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}
.object-infos {
display: table-cell;
vertical-align: middle;
}
.object-name {
margin-top: 0px;
margin-bottom: 0px;
}
.tags {
margin-top: 5px;
}
.tag {
font-size: 10px;
font-weight: initial;
display: inline-block;
color:white;
background-color:#555;
padding: 3px 6px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.text-danger {
color: red;
}
#global-search {
height: 55px;
float: right;
text-align: right;
overflow-y: hidden;
}
#global-search table, #global-search tr td, #global-search tr {
padding: 0;
border: 0;
height: 55px;
margin: 0;
background: transparent;
overflow-y: hidden;
vertical-align: middle;
}
#global-search-area {
line-height: 55px;
}
#global-search-input {
vertical-align: middle;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px #CCC solid;
height: 18px;
width: 180px;
padding: 3px;
background: #fff;
display: inline-block;
}
#global-search-image {
vertical-align: middle;
background: url(../images/search.png?v=#{$version}) center center no-repeat;
display:inline-block;
width: 28px;
height: 30px;
margin-left: -8px;
cursor: pointer;
}
#help-link img {
padding: 0;
border: 0;
}
#help-link {
padding: 0;
border: 0;
background: transparent;
margin-left: 15px;
margin-right: 10px;
}
div.icon {
width: 20px;
height: 20px;
margin: 2px;
float: right;
}
span.ui-icon {
float:left;
margin:0 2px;
}
.ui-layout-button-pin-down {
background: url(../images/splitter-bkg.png?v=#{$version}) transparent;
width: 16px;
background-position: -144px -144px;
}
.ui-layout-resizer-west-open {
background-color: $frame-background-color;
width: 8px;
}
div.footer img {
border: 0;
margin-bottom: 5px;
margin-top: 5px;
}
div.footer{
text-align:center;
}
#SearchResultsToAdd table.listResults tbody {
height: 300px;
overflow-y: auto;
}
tr.row_unchanged td {
border-bottom: 1px #ccc solid;
padding: 2px;
}
.wizContainer table tr.row_error td {
border-bottom: 1px #ccc solid;
background-color: #fdd;
padding: 2px;
}
tr.row_modified td {
border-bottom: 1px #ccc solid;
padding: 2px;
}
tr.row_added td {
border-bottom: 1px #ccc solid;
padding: 2px;
}
a.truncated {
cursor: pointer;
}
.org_combo
{
font-size:x-small;
width: auto;
max-width: 200px;
}
span.form_validation {
width:24px;
text-align:center;
}
.notification {
border: 1px solid #c33;
background-color: #fee;
padding: 0.5em;
margin: 0.5em;
text-align:center;
width: 95%;
-moz-border-radius: 0.5em;
}
.wiki_broken_link {
text-decoration: line-through;
}
.synoptics, .synoptics tr td {
background: transparent;
padding:10px;
font-size:1em;
vertical-align:middle;
color:#fff;
text-align:center;
}
.synoptics tr td.arrow {
color:#333;
border-top: 1px dashed #333;
width:100px;
}
.synoptics tr.synoptics_header td {
color:#000; font-size:1em;
vertical-align:middle;
text-align:center;
}
.mono_value {
display: inline-block;
background-color: #3c3;
color: #fff;
font-weight:bold;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
margin-left:3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.multi_values {
display: inline-block;
background-color: #c33;
color: #fff;
font-weight:bold;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
margin-left:3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.caselog {
overflow-x: hidden;
display: block;
overflow-y: auto;
border: 1px #ddd solid;
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 12px;
}
.caselog_input_header {
padding-top:3px;
padding-bottom:3px;
border-top:1px solid #fff;
background: #ddd;
width:100%;
height: 21px;
}
.caselog_input_header:empty {
display: none;
}
.editor_magnifier{
/* !important so it overrides the .cke_reset_all style */
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
}
.editor_magnifier:hover {
background-color: #CCC;
}
.caselog_header {
padding:3px;
border-top:1px solid #fff;
background: #ddd url(../images/plus.gif) left no-repeat;
padding-left: 16px;
cursor: pointer;
width:100%;
}
.caselog_header.open {
background: #ddd url(../images/minus.gif) left no-repeat;
}
.caselog_entry {
padding:3px;
padding-left: 16px;
border-bottom:1px #999 solid;
margin-left:0;
margin-right:0;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+, CSS3 */
}
.caselog_entry_html p, .HTML p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
/* Helper classes for object details display. */
.one-col-details {
min-width: 400px;
max-width: 600px;
}
.n-cols-details {
width: 100%;
> tbody > tr > td {
min-width: 240px;
}
}
.details {
border-collapse: collapse;
noborder-bottom: 2px #fff solid;
nowidth:100%;
* {
box-sizing: border-box;
}
}
fieldset .details>.field_container {
background: transparent;
border: 0;
}
.field_container {
display: table;
width: 100%;
margin-bottom: 5px;
border-bottom: 2px #ddd solid;
box-sizing: border-box;
&:last-child {
margin-bottom: 0px;
}
&.field_large {
display: inherit;
/* .field_label, .field_data */
> div {
display: inherit;
&.field_label {
width: inherit;
margin-bottom: 5px;
}
&.field_data {
margin-top: 8px;
margin-bottom: 10px;
}
/* .field_value, .field_comments, .field_infos */
> div {
}
}
}
* {
box-sizing: border-box;
}
/* .field_label, .field_data */
> div {
display: table-cell;
vertical-align: top;
&.field_label {
min-width: 100px;
max-width: 145px;
width: 30%;
padding-right: 10px;
> label,span {
color: #000000;
font-weight:bold;
}
}
&.field_data {
display: table;
width: 100%;
margin-bottom: 5px;
}
/* .field_value, .field_comments, .field_infos */
> div {
display: table-cell;
width: auto;
&.field_comments,
&.field_infos{
width: 50px;
}
&.field_value{
.attribute-edit{
display: table;
width: 100%;
/* TODO: Refactor so status icon show over mandatory icon */
.form_validation, .field_status{
display: table-cell;
width: 20px;
padding-left: 0.4em;
vertical-align: middle;
}
.field_input_zone{
width: 100%; /* auto; */
&.field_input_string,
&.field_input_password{
> select, input{
width: 100%;
}
}
&.field_input_onewaypassword{
display: table-cell;
width: auto;
> *{
display: block;
width: 100%;
}
> span{
margin-bottom: 3px;
}
}
&.field_input_date,
&.field_input_datetime{
display: table;
width: 100%;
> input {
display: table-cell;
width: 100%;
}
> span {
display: table-cell;
width: 20px;
padding-left: 0.4em;
vertical-align: middle;
> img {
width: 20px;
cursor: pointer;
}
}
}
&.field_input_text{
border: none;
.f_i_text_header{
/* Inspired by .cke_top */
padding: 6px 8px 6px;
white-space: normal;
border-bottom: 1px solid #fff;
background: #f2f2f2;
.fullscreen_button{
display: block;
width: 15px;
height: 15px;
border: 1px #A6A6A6 solid;
cursor: pointer;
background-image: url('../images/full-screen.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 98%;
}
.fullscreen_button:hover,
.fullscreen_button:focus{
background-color: #CCCCCC;
}
}
textarea{
/* Size for default display */
width: 100%;
height: 100%;
padding: 5px 10px;
border: none;
resize: none;
}
&.fullscreen{
z-index: 100;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
textarea{
/* Size set again here to override resize value when in fullscreen */
width: 100% !important;
height: 100% !important;
}
.fullscreen_button{
width: 22px;
height: 22px;
background-color: #CCCCCC;
}
}
}
&.field_input_html{
// Nothing
}
&.field_input_document{
> input{
width: 100%;
}
> span {
display: inline-block;
margin-bottom: 2px;
}
}
&.field_input_image{
input{
width: 100%;
}
}
&.field_input_extkey{
display: table;
width: 100%;
> .field_select_wrapper{
display: table-cell;
width: auto;
> select {
width: 100%;
}
}
> .field_autocomplete{
display: table-cell;
width: 100%;
}
> .field_input_btn{
display: table-cell;
width: 25px;
padding-left: 0.4em;
> img {
max-width: 20px;
}
}
}
}
}
}
}
}
}
.one-col-details .details .field_container.field_small {
div.field_label {
/* On a single column, field labels can take more width but they are limited so it doesn't feel weird when all labels are short */
width: 175px;
max-width: inherit;
}
}
/* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */
.field_input_text{
border: none;
.f_i_text_header{
/* Inspired by .cke_top */
padding: 6px 8px 6px;
white-space: normal;
border-bottom: 1px solid #fff;
background: #f2f2f2;
.fullscreen_button{
display: block;
width: 15px;
height: 15px;
border: 1px #A6A6A6 solid;
cursor: pointer;
background-image: url('../images/full-screen.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 98%;
}
.fullscreen_button:hover,
.fullscreen_button:focus{
background-color: #CCCCCC;
}
}
textarea{
/* Size for default display */
width: 100%;
height: 100%;
margin: 0px;
padding: 5px 10px;
border: none;
resize: none;
}
&.fullscreen{
z-index: 100;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
textarea{
/* Size set again here to override resize value when in fullscreen */
width: 100% !important;
height: 100% !important;
}
.fullscreen_button{
width: 22px;
height: 22px;
background-color: #CCCCCC;
}
}
}
#SiloSelection{
padding-top: 3px;
padding-right: 30px;
text-align: left;
*{
box-sizing: border-box;
vertical-align: middle;
}
.ac_input {
width: 100%;
}
.field_input_extkey{
display: table;
width: 100%;
.field_select_wrapper{
display: table-cell;
width: 100%;
> select{
width: 100%;
max-width: initial;
}
}
.field_input_btn{
display: table-cell;
width: 25px;
padding-left: 0.4em;
}
}
}
.ac_dlg_loading {
background: white url('../images/indicator.gif') right center no-repeat;
}
table.pagination {
display:inline-block;
}
table.pagination tr td {
padding: 3px;
}
.pagination_container {
padding-left: 3px;
}
.pager p {
margin-top: 0;
margin-bottom: 0;
}
.pager td span {
min-width: 20px;
padding-left: 2px;
padding-right: 2px;
display:inline-block;
text-align: center;
cursor: pointer;
}
.pager td span.curr_page {
color: #fff;
background: #999;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
img.prev, img.first, img.next, img.last {
cursor: pointer;
}
div.actions_button {
float:right;
background: $highlight-color url("../images/actions_left.png?v=#{$version}") no-repeat scroll left top;
padding-left: 5px;
margin-top: 0;
margin-right: 10px;
height:19px;
vertical-align: middle;
}
div.actions_button a, .actions_button a:hover, .actions_button a:visited {
background: $highlight-color url(../images/actions_bkg.png?v=#{$version}) no-repeat scroll right top;
color:#fff;
padding-right: 8px;
cursor:pointer;
font-family: Tahoma,sans-serif;
font-size: 11px;
font-weight: bold;
padding-left: 4px;
text-decoration: none;
height:19px;
line-height: 17px;
display: block;
}
select#org_id {
max-width: 90%;
}
/*********** Dashboards ***********/
.itop-dashboard {
background-color: #fff;
}
.itop-dashboard a {
cursor: not-allowed;
}
.dragHover {
background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=#{$version});
}
.edit_mode .dashlet {
background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=#{$version});
padding: 5px;
margin:0;
position:relative;
}
.edit_mode .dashlet-selected {
background: $highlight-color !important;
padding: 5px;
margin:0;
}
td.layout_cell {
height: 50px; /* min-height does not work */
vertical-align: top;
}
.dashlet-content {
position: relative;
background: #fff;
margin:0;
overflow: auto;
}
table.prop_table {
border-bottom: 2px solid #F9F9F1;
padding: 1px;
width: 100%;
}
.close-box {
margin: 5px;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
z-index: 10;
background: transparent url(../images/delete.png?v=#{$version}) no-repeat center;
}
td.prop_value {
text-align: left;
}
tr.itop-property-field-modified td {
background: #fbb;
}
tr.itop-property-field-modified td.hover {
background: #f99;
}
td.prop_value textarea, td.prop_value input[type=text]{
width: 98%;
}
td.prop_icon {
width: 20px;
}
.dashlet {
text-align:left;
}
.dashlet-inline {
display: inline-block;
}
.dashlet-badge a.actions {
background: none repeat scroll 0 0 transparent;
color: #666666;
font-size: 16px;
text-decoration: none;
}
.dashlet-content .display_block {
text-align:left;
}
.dashlet-unknown, .dashlet-proxy {
.dashlet-content {
padding: 8px;
background-color: #F2F2F2;
text-align: center;
.dashlet-ukn-text, .dashlet-pxy-text {
margin-top: 10px;
}
}
}
.prop_apply .ui-icon-alert {
display: none;
}
.prop_apply .ui-state-error .ui-icon-alert {
display: block;
}
.ui-state-error .ui-icon-circle-check {
display: none;
}
.summary-details {
float: right;
margin-top: 5px;
}
.summary-details th {
background: none repeat scroll 0 0 $summary-details-background;
color: #EEEEEE;
padding: 5px;
text-align: center;
}
.main_header {
background-color: $main-header-background;
min-height: 60px;
width: 100%;
}
.main_header h1 {
color: $complement-color;
line-height: 16px;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 10px;
padding-top: 10px;
}
.main_header img {
margin-top: 10px;
margin-right: 10px;
float:left;
}
a.summary, a.summary:hover {
background: none repeat scroll 0 0 transparent;
color: #666666;
text-decoration: none;
padding-left: 0;
}
.summary-details td {
background: none repeat scroll 0 0 transparent;
padding: 5px;
text-align: center;
}
#DashboardMenu > ul > li {
list-style: none;
vertical-align: middle;
margin: 0;
padding: 0;
cursor: pointer;
}
#DashboardMenu > ul {
list-style: none;
vertical-align: middle;
margin: 0;
padding: 0;
height: 25px;
}
#DashboardMenu li a {
display: block;
padding: 5px 12px;
text-decoration: none;
color: #000;
font-weight: bold;
text-align: left;
white-space: nowrap;
background: #fff;
}
#DashboardMenu li span {
display: block;
padding: 5px 12px;
text-decoration: none;
color: #000;
white-space: nowrap;
background: #fff;
}
#DashboardMenu li {
list-style: none;
}
#DashboardMenu li a:hover {
background: #1A4473;
}
#DashboardMenu ul > li > ul
{
border: 1px solid black;
background: #fff;
}
#DashboardMenu li > ul
{ margin: 0;
padding: 0;
position: absolute;
display: none;
border-top: 1px solid white;
z-index: 1500;
}
#DashboardMenu li ul li a:hover{
background: $popup-menu-highlight-color;
color: $popup-menu-text-higlight-color;
font-weight: bold;
list-style: none;
}
.sortable_field_list {
display: inline-block;
width: 250px;
height: 150px;
border: 1px #333 solid;
overflow: auto;
padding-left: 0;
margin: 0;
}
.sortable_field_list li {
list-style: none;
font-size: 11px;
}
.sort_order {
display: inline-block;
width: 16px;
height: 12px;
}
.sort_none {
background: url(../images/bg.gif) no-repeat center;
}
.sort_asc {
background: url(../images/desc.gif) no-repeat center;
}
.sort_desc {
background: url(../images/asc.gif) no-repeat center;
}
.sort_hidden {
display: none;
}
.sortable_field_list > li.selected {
background: #F6A828;
}
.itop-deleted-object {
text-decoration: line-through;
}
.header_message {
padding: 1em;
font-size: 10pt;
background: #fff;
border: 1px solid #999;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 10px;
}
.header_message {
padding: 1em;
font-size: 10pt;
background: #fff;
border: 1px solid #999;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 10px;
}
.message_info {
border: 1px solid #993;
background: url(../images/info-mini.png?v=#{$version}) 1em 1em no-repeat #ffc;
padding-left: 3em;
}
.message_ok {
border: 1px solid #393;
background: url(../images/ok.png?v=#{$version}) 1em 1em no-repeat #cfc;
padding-left: 3em;
}
.message_error {
border: 1px solid #933;
background: url(../images/error.png?v=#{$version}) 1em 1em no-repeat #fcc;
padding-left: 3em;
}
.fg-menu a img {
border: 0;
}
div.ui-dialog-header {
padding-bottom: 10px;
padding-top: 7px;
}
.form_field_error {
border: 1px solid #933;
background: #fcc;
}
.simple-graph, .graph_config {
background: #fff;
}
.graph_config {
padding: 0.25em;
}
.graph_config button.ui-widget {
font-size: 12px;
}
.ui-tooltip, .arrow:after {
background: $frame-background-color;
border: 1px solid $grey-color;
}
.ui-tooltip {
padding: 10px 10px;
box-shadow: 0 0 7px black;
max-width: 350px;
overflow: hidden;
}
.ui-tooltip .arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.ui-tooltip .arrow.top {
top: -16px;
bottom: auto;
}
.ui-tooltip .arrow.left {
left: 20%;
}
.ui-tooltip .arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ui-tooltip .arrow.top:after {
bottom: -20px;
top: auto;
}
.ui-tooltip .ui-tooltip-content{
overflow-x: auto;
}
table.export_parameters td {
padding-right: 2em;
}
.table_preview > table {
border-collapse: collapse;
max-height: 150px;
overflow: auto;
display: block;
}
.table_preview > table > thead > tr > th, .table_preview > table > tbody > tr > td {
border: 1px $grey-color solid;
min-height: 1em;
padding-left: 0.25em;
padding-right: 0.25em;
font-size: 10pt;
}
.table_preview > table > tbody > tr > td {
vertical-align: top;
}
.table_preview .drag-handle {
cursor: move;
}
.table_preview div.text-preview {
white-space: pre-wrap;
}
/* Format for the PDF output */
.table_preview .view-image {
// Counteract the forced dimensions (usefull for displaying in the details view)
width: inherit !important;
height: inherit !important;
text-align: center;
img {
max-width: 48px !important;
max-height: 48px !important;
display: inline-block;
}
}
.graph_zoom {
display: inline-block;
float: right;
margin-right: 2em;
}
.graph_zoom_slider {
display: inline-block;
width: 10em;
}
.graph_zoom_plus, .graph_zoom_minus {
display: inline-block;
margin-left: 1em;
margin-right: 1em;
}
div.explain-printable {
border: 5px solid $complement-color;
background: $complement-light;
color: #000;
padding: 10px;
margin: 0;
font-size: 12px;
}
.hideable-chapter {
cursor: pointer;
}
#hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter span {
padding-left: 20px;
background: url(../images/eye-open-555.png?v=#{$version}) 2px center no-repeat;
}
#hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter.strikethrough span {
text-decoration: line-through;
background: url(../images/eye-closed-555.png?v=#{$version}) 2px center no-repeat;
}
.printable-version legend {
padding-left: 26px;
background: $complement-color url(../images/eye-open-fff.png?v=#{$version}) 8px center no-repeat;
}
.printable-version .strikethrough legend {
background: $complement-color url(../images/eye-closed-fff.png?v=#{$version}) 8px center no-repeat;
}
.printable-version fieldset.strikethrough span {
display: none;
}
h2.printable-tab-title {
border-bottom: 2px solid;
}
.strikethrough {
text-decoration: line-through;
}
select.multiselect {
max-width: 150px;
}
span.search-button, span.refresh-button {
display: inline-block;
width: 21px;
height: 18px;
cursor: pointer;
color: #FFFFFF;
text-align: center;
padding-top: 3px;
font-size: 10px;
}
.actions_button.icon_actions_button {
padding: 0 2px 0 2px;
}
.case-log-history-entry {
display: block;
}
.case-log-history-entry-end {
display: none;
}
.expanded .case-log-history-entry-end {
display: inline;
}
.case-log-history-entry-more {
display: inline;
}
.expanded .case-log-history-entry-more {
display: none;
}
.case-log-history-entry .case-log-history-entry-toggle {
display: inline-block;
float: none;
pointer: cursor;
vertical-align: bottom;
}
.printable-tab .case-log-history-entry-end {
display: inline;
}
.printable-tab .case-log-history-entry-more {
display: none;
}
.printable-tab .case-log-history-entry .case-log-history-entry-toggle {
display: none;
}
.history_entry {
position: relative !important;
max-width: 100%;
}
.history_entry_truncated {
max-height: 7em;
overflow: hidden;
}
.history_truncated_toggler {
position: absolute !important;
bottom: 0;
right: 0;
display: block;
cursor: pointer;
width: 16px;
height: 16px;
background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
background-position: -16px -192px;
}
.history_entry_truncated .history_truncated_toggler {
background-position: 0 -192px;
}
#top-bar-table {
width: 100%;
padding-left: 5px;
$top-button-width: 40px;
$top-button-heigth: 55px;
$top-button-spacer: 35px;
#open-left-pane {
text-align: center;
width: $top-button-width !important;
cursor: pointer;
}
#go-home {
text-align: center;
width: $top-button-width !important;
a {
text-decoration: none;
color: #555;
font-size: 9pt;
padding: 0;
background: none;
// Make the whole cell clickable
display: inline-block;
line-height: $top-button-heigth;
width: 100%;
}
}
.top-bar-spacer{
width: $top-button-spacer !important;
}
#top-bar-table-search{
min-width: 370px;
}
}
#itop-breadcrumb{
overflow: hidden;
float: left;
background: $frame-background-color;
.breadcrumb-item{
float: left;
margin: 3px 22px 2px 0px;
.icon img{
height: 15px;
width: auto;
margin-right: 5px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
// IE has no filter option: at least, have some effect when hovering...
opacity: 0.5;
}
a{
text-decoration: none;
color: #555;
font-size: 9pt;
padding: 0;
background: none;
&:hover .icon img{
-webkit-filter: none;
filter: none;
opacity: 1;
}
span.truncate
{
// Ellipsis
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
&:hover{
text-decoration: none;
color: $highlight-color;
}
&::after{
content:'';
position: absolute;
background-image: url(../images/breadcrumb-separator.png?v=#{$version});
background-repeat: no-repeat;
width: 8px;
height: 16px;
margin-left: 5px;
}
}
&:last-child a::after{
display: none;
}
&.breadcrumb-current{
text-decoration: none;
color: #555;
font-size: 9pt;
padding: 0;
background: none;
span.truncate
{
// Ellipsis
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
}
}
}
.ui-datepicker-buttonpane, .ui-timepicker-div {
font-size: 9pt;
font-family: Tahoma, Verdana, Arial, Helvetica;
}
.date_format_tooltip td {
padding: 0.25em;
}
#setup {
.module-selection-banner img {
max-height: 48px;
}
.module-selection-body {
height: 28em;
overflow: auto;
border: #ccc 1px solid;
}
}
.mfp-close {
cursor: pointer !important;
}
.qtip-content {
font-size: 12px;
}
.qtip-content p:first-child {
margin-top: 0px;
}
.qtip-content p:last-child {
margin-bottom: 0px;
}
.synchro-source {
}
.synchro-source-title {
font-weight: bolder;
}
.synchro-source-description {
font-size: smaller;
margin-top: 3px;
margin-bottom: 1px;
}
.object-ref.archived {
}
.object-ref-icon.fa {
color: $highlight-color;
font-size: smaller;
vertical-align: 1px;
margin-right: 1px;
}
.object-ref-icon-disabled.fa {
color: $grey-color;
font-size: smaller;
margin-right: 1px;
}
.object-ref-link {
background: none;
}
.extension-source {
display:inline-block;
background-color: $grey-color;
padding:3px;
font-size:10px;
color:#fff;
border-radius: 4px;
}
///////////////////
// Datamodel Viewer
///////////////////
#img-lifecycle{
width:100%;
}
#img-lifecycle:hover{
width:100%;
cursor:pointer;
}
#search-model{
width:90%;
}
.mfp-figure:after{
background-color: #dff1ff;
}
#classDetailsClassName{
display:inline;
}
.qtip-content a, .qtip-content a:visited{
color : #1c94c4;
text-decoration: none;
}
.qtip-content a:hover, .qtip-content a:active{
color : #e87c1e;
text-decoration: none;
}
.data-model-viewer a, .data-model-viewer a:visited {
color : #1c94c4;
text-decoration : none;
}
.data-model-viewer a:hover {
color: #e87c1e;
text-decoration: none;
}
table.listResults .originColor{
width : 0px;
padding : 2px !important;
}
#displaySelectorLabel, #changeDefaultDisplay{
display :inline-block;
}
#dataModelSplitPane{
height:100%;
}
#dataModelClassIcon, dataModelScrollableDiv > img{
padding-right: 13px;
display: inline;
}
#dataModelScrollableDiv{
background-color: #eee;
position: fixed;
z-index: -1;
width: 100%
}
#dataModelHeader{
background-color: white;
}
#dataModelSplitPane #tabbedContent_0{
z-index: -2;
}
#dataModelScrollableClassName, #dataModelScrollableClassIcon{
display: inline;
}
#dataModelScrollableDiv > img {
padding-right: 5px;
}
#dataModelSplitPane .ui-layout-resizer {
background: #DDD;
width:10px !important;
margin-left: 15px !important;
}
#dataModelSplitPane .ui-layout-resizer :hover{
background: #E87C1E;
}
#dataModelSplitPane .ui-layout-resizer-west{
border-left : 1px solid #BBB;
border-right: 1px solid #BBB;
}
#dataModelSplitPane .ui-layout-resizer-east{
border-left : 1px solid #BBB;
border-right: 1px solid #BBB;
}
#dataModelSplitPane .ui-layout-toggler{
background: #AAA;
width:10px !important;
}
#dataModelSplitPane .ui-layout-toggler:hover{
background: #E87C1E;
}
.dataModelSchema g {
cursor: pointer;
}
.dataModelSchema g:hover rect:not(.liseret){
fill: #dbe4f0;
}
.dataModelSchema text {
fill: black;
font: 10px sans-serif;
text-anchor: middle;
}
#selfreferencing:hover ~ g > .selfattr{
fill: #dbe4f0;
}
.tooltipD3{
position: fixed;
text-align: center;
background: #EEE;
border: 1px solid $grey-color;
border-radius: 2px;
pointer-events: none;
fill: black;
font: 11px sans-serif;
text-anchor: middle;
}
#tooltipD3_top{
font-weight: bold;
border-bottom: 1px solid $grey-color;
padding: 3px;
}
.tooltipD3 i {
font-size: 14px;
}
.tooltipD3 span{
margin: 2px;
}
.dataModelSchema .selfattrtxt {
font-family: FontAwesome;
}
.data-model-viewer{
background-color: #FFF;
margin-top:7px !important;
margin-left: 15px !important;
}
#delDataModelSearch {
color: #E87C1E;
font-family: FontAwesome;
display:inline-block;
font-size:15px;
margin-left:1%;
}
#dataModelSplitPane .ui-layout-center{
margin-left :30px !important;
}
///////////////////
//Impact analysis filter
#ds_flash{
margin-bottom: 5px;
}
/////////
// Icon select
.menu-icon-select{
max-height : 300px;
position : absolute;
z-index : 201;
overflow-x : hidden;
overflow-y : auto;
}
.menu-icon-select > .ui-menu-item{
padding: .3em 3%;
}
.attribute-tagset > span, .attribute-tagset-undefined > span {
display: inline-block;
padding: 3px;
margin-right: 3px;
border-radius: 4px;
}
.attribute-tagset > span {
color: white;
background-color: grey;
}
.attribute-tagset-undefined > span {
color: grey;
background-color: lightgrey;
font-style: italic;
}
div.selectize-control {
position: static;
display: inline-block;
vertical-align: middle;
}
div.selectize-input {
width: auto;
min-width: 8em;
}
div.selectize-input.has-items:after {
content: "";
display: inline-block;
}
div.selectize-control > div.selectize-input > div.item.partial-code {
color: floralwhite;
background-color: grey;
background-image: linear-gradient(to bottom, white, grey);
border-color: darkgray;
font-style: italic;
}
div.selectize-control > div.selectize-input > div.item.partial-code.active {
background-image: linear-gradient(to bottom, grey, darkgrey);
}
div.selectize-control > div.selectize-input > div.item.partial-code > a.remove {
border-color: grey;
}