@CHARSET "ISO-8859-1";
/*
TopEase web admin application css.
Contains application-wide styles.
Overrides base.css and tew.css styles.
Author: kro $Author:$
Version: $Version:$
*/
/* Guidelines
- CSS 2.1 is expected (as far as >IE7 supports it in standards mode)
- general html styles are in base.css
- ICEFaces styles are in tew.css
- elements selectors are preferably based on css classes
- use id selectors for distinct instances, escape ':'. Example: #shareForm\00003AaccessList-list\00003Atbody {...}
- dimensions of fonts and elements containing text can be given in pt, or better px
- dimensions of graphics and borders are usually given in px
- spacing:
- divs are used for logical grouping and spacing of divs is generally empty (zero margin, zero padding)
- for visual separation, block-level elements , , etc. are styled with a bottom margin
- the .p class can be given to divs, forms etc to add a bottom margin
(generally adding space after paragraphs is the most simple styling)
- colors
Please use only the following colors:
#f5f5f5 - background of dialogs, panels, messages, dropdowns
#d9d9d9 - borders of tables, fields, dialogs
#D9F0FC - w7 armed button blue
#3C7FB1 - w7 button border blue, link text color
#3399FF - w7 dropdown select, list select
#5488B8 - main header title (b-dna blue), see also rebrand.css
#E3F3FF - light b-dna menu blue
#484848 - almost-black text
#6B6351 - SF brown deprecated
#FFD200 - SF yellow deprecated
#7FB6D9 - SF blue 50% deprecated
#ababab - disabled text, shadows
#FFCCCC - invalid input background
- module styleclass
the webadminMaster.xhtml template assigns the bean name of each editor bean to the style of its div,
so you can use these styles to add editor-local rules like .storageModule .itemList {}
*/
/************
BASIC STYLES
************/
html{
width: 100%; height: 100%;
}
body{
margin: 0px;
padding:0px;
border:none;
width: 100%; height: 100%;
position:absolute; /* fixes IE7 scrolling bug when 100% sized body */
}
body,
table,
.iceInpTxt, .iceInpSecrt, .iceInpTxtArea,
.iceInpTxt-dis, .iceInpSecrt-dis, .iceInpTxtArea-dis {
font-size: 13px; /*general default font size*/
}
h1 {
margin: 12px 0px 6px 0px; /*see also .section margin */
}
h1,
h1 .iceOutTxt {
font-size: 18px;
font-weight: 700;
color:#065BAA;
}
h1 .iceGphImg{
padding-bottom: 3px;/*raise icons else too low for 18px text*/
}
input.singleWidth,
input.singleWidth-dis {
font-size: 13px;
width: 250px;
}
select.singleWidth,
select.singleWidth-dis {
width: 258px;
}
input.doubleWidth,
input.doubleWidth-dis {
width: 500px;
}
select.doubleWidth,
select.doubleWidth-dis {
font-size: 13px;
width: 508px;
}
.qtip ul{
margin: 5px 0px;/*override 1em default*/
padding-left: 10pt;/*override 30pt default*/
}
/****************
COMPONENT STYLES
*****************/
/* paragraph and other toplevel element spacing (see comments on top) */
#mainContent>h1,
#mainContent>p,
#mainContent>table,
.p {
margin-bottom: 8px;
}
.mbh { /* margin bottom before header*/
margin-bottom: 24px; /*see also .section>.content*/
}
.iceGphImg {
border:none; /* display icons generally without borders */
vertical-align: text-bottom; /* most icons are designed to look best when bottom-aligned with text glyphs */
}
.iceSelOneMnu,
.iceSelOneMnu-dis {
padding-right: 0px; /*fix gap between [v] button and border*/
}
/* general styling in popup dialogs, see also .confirm */
.icePnlPop {
}
.icePnlPop .icePnlPopHdr+.icePnlPopHdr {
/* remove the second title field, it hasn't any function */
display:none;
}
.icePnlPop .buttons {
text-align: center; /* place buttons centered */
margin-top: 10pt;
}
.icePnlPop .buttons .iceCmdBtn,
.icePnlPop .buttons .iceCmdBtn-dis {
margin-right: 5pt;
min-width: 6em;
}
.iceOutRsr {/* http://jira.icesoft.org/browse/ICE-3714 */
display:inline;
}
/* marker class for elements that can be styled to horizontally fill their parent */
.hfill{
}
/* status overlay marker */
.status.ERROR{
/*position:relative; required for overly positioning */
}
.status.ERROR .iceOutTxt {
color: red;
}
.status.ERROR>.marker{
/*experiment with overlay*/
display:none;
/*position: absolute;
display: inline-block;
left:0px;right:0px;top:0px;bottom:0px;
background-color: yellow;
filter: alpha(opacity=50);*/
}
/* 'select' element realised with iceMnuBar */
.selectMenu{
/*can use domain class to override position*/
position:relative; /*ref for popup*/
}
.selectMenu>.iceMnuBarItem {
/*all default*/
}
.selectMenu>.iceMnuBarItem>.iceLink {
margin:0px;
padding: 0px;
}
.selectMenu>.iceMnuBarItem>.iceLink>.iceMnuBarItemLabel {
/* add v arrow */
margin: 0px 3px 0px 0px; /*arrow offset*/
padding: 3px 15px 3px 5px; /*place for arrow*/
font-weight: normal;
background: url("../../imgs/horizontal_dropdown.gif") no-repeat right center;
}
.selectMenu>.iceMnuBarSubMenu{
/*suppress ice script position? (wrong when scrolled or resized)*/
top: 20px !important;
left: 0px !important;
}
.selectMenu>.iceMnuBarSubMenu>.iceMnuItm>a {
height: auto;
line-height: normal;
}
.selectMenu>.iceMnuBarSubMenu>.iceMnuItm>a:HOVER {
background: #3399FF;/* - w7 dropdown select, list select*/
}
.selectMenu>.iceMnuBarSubMenu>.iceMnuItm>a>.iceMnuItmImage {
display: none;
}
.selectMenu>.iceMnuBarSubMenu>.iceMnuItm>a>.iceMnuItmLabel {
display:inline-block;
padding: 3px 15px 3px 5px; /*fit with 'button' arrow*/
}
.textConstant{
color: #ababab;
}
.twaDescription {
white-space:pre-line;/*if not supported no problem*/
padding-top: 4px;
padding-bottom: 10px;
}
.twaDescription>.iceOutTxt{
color: #484848;
}
/* puts contained message spans in separate lines */
.validationMessages>span{
display:block;
}
/* component "tags/webadmin/search.xhtml" */
.search {
display:block;
position:relative;
height:18px;
}
.search .hfill {
position:absolute;
top:0px; left:0px; right:25px; /*space for button*/
}
.search .hfill .iceInpTxt {
position:absolute;/*prevent IE7 and FF offset top by 1 px*/
top:0px;
width:100%;
height:14px;
padding-right: 0px;
}
.search .iceCmdBtn {
position:absolute;
top:1px;
right:0px;
}
/* commandLink with action style
(first used in usersSynch, editConfig)
*/
/*see also .mailto*/
.iceCmdLnk.action {
color: #3C7FB1;
}
.iceCmdLnk-dis.action-dis {
border:none;
}
.iceCmdLnk.action:HOVER{
text-decoration: underline;
}
/* style for component "tags/webadmin/command.xhtml" */
.twaCommand {
margin: 0px 2px 0px 2px;
}
.twaCommand:HOVER {
background-color: #D9F0FC; /*w7 armed button blue */
}
.twaCommand-dis {
margin: 0px 2px 0px 2px;
border-bottom: none; /*override ice*/
}
.twaCommand>.iceGphImg+.iceOutTxt,
.twaCommand-dis>.iceGphImg+.iceOutTxt {
margin-left: 3px;
}
.twaCommand .iceOutTxt {
color: #484848;
font-size: 10pt;
}
.twaCommand-dis .iceOutTxt {
color: #ababab;
font-size: 10pt;
}
.twaCommand-dis>.iceGphImg{
opacity: 0.5;/*opacity not in IE8, graceful degradation*/
/*visibility: hidden; disturbs layout */
}
/* should look like twaCommand */
.resourceCommand{
padding: 0px;
}
.resourceCommand:HOVER {
background-color: #D9F0FC; /*w7 armed button blue */
}
.resourceCommand .iceGphImg+.iceOutRsr{
margin-left:3px;
}
/* styles for component "paginator.xhtml" (deprecated, use itemList's paginator instead)*/
.paginator{
font-weight: normal;
font-size: 10pt;
background: #f5f5f5;
line-height: 16px;
}
.paginator .range {
float:left;
}
.paginator .iceDatPgr {
float:right;
}
.paginator .iceDatPgrScrBtn{
padding: 0px;
}
.paginator .iceDatPgrScrBtn .iceCmdLnk {
margin: 0px 2px 0px 2px;
}
.paginator>.previous {
display:inline-block;
float: left;
width: 18px;height:16px; /*strip 18x18 button's border*/
background: url("../../xmlhttp/css/rime/css-images/arrow-previous.gif") no-repeat right center;
}
.paginator>.next {
display:inline-block;
float: right;
width: 18px;height:16px;
background: url("../../xmlhttp/css/rime/css-images/arrow-next.gif") no-repeat left center;
}
/* interceptor div for catching clicks outside popup or dropdown components */
.chooser>.iceCmdLnk.interceptor,
.interceptor {
display:block;
position:fixed;
top: 0px;
left:0px;
width: 100%;
height: 100%;
cursor: default;
background: url(about:blank);
}
/* dropdown div in chooser components */
.dropdown {
display:block;
position:absolute;
z-index: 1;
top:19px; /* typical container hight, override if different */
left:0px; /* be default make dropdown width the same as its container, override if not */
right:0px;
background-color: #f5f5f5;
border: 1px solid #d9d9d9;
max-height: 300px;
overflow: auto;
}
.dropdown>.iceCmdLnk {
/* typically dropdown consists of items, render them as menu items by default */
display:block;
padding: 2px;
overflow: hidden;/*against text inside w. padding be taller than link so 2 links overlap und hover flickers*/
}
.dropdown>.iceCmdLnk:HOVER{
background-color: #3399FF; /*w7 dropdown select */
color: #ffffff;
cursor: default;
}
.dropdown>.iceCmdLnk:HOVER .iceOutTxt {
color: #ffffff;
}
/* styling of item list */
.itemList-empty {
/*border:1px solid #d9d9d9;*//*looks better without border*/
}
.itemList>table {
margin:0px;
/* border concept is: table makes top and left and cells make right and bottom */
/* part of that settings are in tew.css, complete and consolidate them here */
border-top: 1px solid #d9d9d9;
border-left: 1px solid #d9d9d9;
border-right: none;
border-bottom: none;
border-collapse:collapse; /* see separate to verify border concept */
}
.itemList>table .iceDatTblRow1,
.itemList>table .iceDatTblRow2 {
background-color: transparent; /* zebra off */
}
.itemList>table>thead>tr>th.iceDatTblHdr,
.itemList>table>thead>tr>th.iceDatTblColGrpHdrCol,
.itemList>table>tfoot>tr>td.iceDatTblFtr,
.itemList>table>tbody>tr>td
{
/* unfortunately, icefaces inserts a single empty cell in empty tables.
because td:empty is not supported in css 2.1 yet, tried a trick: made all td invisible except those with known classes
but unfortunately, IE7 needs display:block and FF display:table-xxx to turn visibility on again
finally decided to just provide the missing right border
*/
border-top:none;
border-left:none;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
padding: 2px;
}
.itemList>table>thead>tr>th.iceDatTblHdr,
.itemList>table>thead>tr>th.iceDatTblColGrpHdrCol {
background-color: #f5f5f5;
text-align: left;
}
.itemList>table>thead>tr.spacer>th.iceDatTblColGrpHdrCol {
border: 0px;
padding: 0px;
}
.itemList>table>thead>tr.searchRow>th>.iceCmdBtn {
float:left;
}
.itemList>table>thead>tr.searchRow>th>.iceCmdBtn + .search {
/* [[+][search ]] */
margin-left: 20px;
}
/* header cell text generally 11px bold */
.itemList .iceDatTblColHdr,/*th cells contributed by ice:col header facets*/
.itemList .iceDatTblColGrpHdrCol,/*th cells contributed by ice:columnGroup rows*/
.itemList .iceDatTblColGrpHdrCol>.iceOutTxt,/*in jobs*/
.itemList .iceDatTblColHdr1,
.itemList .iceDatTblColHdr2,
.itemList .iceCmdSrtHdr,
.itemList .iceCmdSrtHdr>table/*overr. table*/ {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color:#484848;
text-align: left;
}
.itemList tr.filter>th.iceDatTblColGrpHdrCol,
.itemList tr.filter>th.iceDatTblColGrpHdrCol>.iceOutTxt {
/* exception to above rule for filter rows */
font-size: 13px;
font-weight: normal;
color: black;
}
.itemList>table>thead>tr>th,
.itemList>table>tbody>tr>td {
white-space: nowrap;
overflow: hidden; /* Beware! Clips drowdowns!*/
text-overflow: ellipsis;
}
.itemList>table>tbody>tr>td>.iceCmdLnk-dis{
/* rows in itemlist without edit actions, rendered as disabled links */
border:none;
}
.itemList>table .iceDatTblCol1 .iceSelBoolChkbx {
display:inline-block;
width: 16px; height: 16px;
margin: 0px 4px 0px 0px;
padding: 0px;
float: left; /* relevant if rest of cell is block, see .shareAccess .flags */
}
.itemList>table>tfoot>tr>.iceDatTblFtr {
XXbackground-color: #f5f5f5; /* see .paginator */
padding: 2px 2px;
}
.itemList>.commands {
margin-top: 2px;
}
/* styling of choiceMany popup dialogs */
.choiceManyPopup {
min-width: 15em;
max-width: 30em;
}
.choiceManyPopup > table {
width: 100%;
}
.choiceManyPopup > table .itemList {
width: 100%;
margin-bottom: 10px;
}
.users.choiceManyPopup .itemList>table{
width:30em;
}
/* generic chooser component */
.chooser{
display:inline-block;
width: 30em;
height: 20px;
position:relative;
}
.chooser.doubleWidth{
width: 508px; /* see other .doubleWidth */
}
.choosing {
/* z-index: The chooser itself stays in the stacking where it is (auto), see .dropdown */
}
.chooser>.iceCmdLnk {
display:inline-block;
position:absolute;
top:0px;left:0px;
bottom:0px;right:0px;
border:1px solid #d9d9d9;
}
.chooser>.iceCmdLnk:HOVER {
border-color: #C7E2F1; /*w7 dropdown border blue*/
cursor: default;
}
.chooser>.iceCmdLnk>.listableBean {
display: inline-block;
position:absolute;
top:0px;left:0px;
bottom:0px;right:14px;
padding:0px;
overflow: hidden;
white-space: nowrap;
}
.chooser>.iceCmdLnk>.arrow { /* arrow icon 7x16 */
position:absolute;
display:inline-block;
top:0px;right:0px;
width:13px;bottom:0px;
border-left:1px solid #ffffff; /*invisible unless hovered*/
background: url("../../imgs/horizontal_dropdown.gif") no-repeat center;
}
.chooser>.iceCmdLnk:HOVER>.arrow {
border-color: #C7E2F1; /*w7 dropdown border blue*/
background-color: #D9F0FC; /*w7 armed button blue */
}
.chooser>.iceCmdLnk-dis {
border: none;
}
.chooser .interceptor {
/* see general .interceptor */
}
.chooser>.dropdown{
/* see general .dropdown */
}
/* tree chooser (DEPRECATED - not used anymore) */
.treeChooser {
}
.treeChooser .input {
width: 30em;
}
.treeChooser .button {
width: 3em;
height: 24px;
text-align: center;
}
.treeChooser .hook {
/* reference point for absolutely positioned popup, needs be a span in IE7 */
display:inline-block;
position:relative;
vertical-align:bottom;
}
.treeChooser .interceptor {
/* see general .interceptor */
}
.treeChooser .dropdown {
/* see general .dropdown */
top: 0pt;
left: -28em;
right: 0em;
height: 20em;
overflow: auto;
background-color: #f5f5f5;
border: 1px solid #d9d9d9;
}
.treeChooser .iceTreeRow {
}
.treeChooser .iceTreeRow>a img {
vertical-align:top; /* override "center" to not get half-pixel positionings */
}
.treeChooser .iceTreeRow>a {
display:inline-block; /* consisting of img only renders best as block */
}
.treeChooser .iceTreeRow .iceCmdLnk {
padding: 3px;
}
.treeChooser .iceTreeRow .iceCmdLnk:HOVER {
background-color: #D9F0FC; /*w7 armed button blue */
text-decoration: none; /*override underline */
}
/* component */
.confirm {
/* icePnlPop styled to look similar to icePnlCnf, see twa.css */
border: #d9d9d9 1px solid;
}
.confirm .icePnlPopBody {
background-color: #f5f5f5;
}
.confirm .message {
width: 300px;
}
.confirm .buttons {
/* see .icePnlPop .buttons */
}
/* component */
.checkbox .iceSelBoolChkbx,
.checkbox .iceSelBoolChkbx-dis {
margin:0px; /* improve alignment with text */
}
.checkbox .iceOutLbl {
/*font-family: Arial, Helvetica, sans-serif;*/
/*font-size: 13px;*/
font-weight: normal;
color: black;
}
/*
collapsible panel component
*/
.section{
margin: 12px 0px; /*see also h1 margin*/
}
.section>.header{
cursor:pointer;
background: url("../../imgs/little_down.gif") no-repeat 3px center;/*3px left of icon*/
padding-left: 13px; /* 3+7+3 */
}
.section.expanded>.header{
background-image: url("../../imgs/little_up.gif");
}
.section>.header .iceOutTxt {
font-size: 18px;
font-weight: 700;
color:#065BAA;
}
.section>.content{
margin: 6px 0px 24px 0px; /*see also .mbh */
}
/** progress bar (not used currently) */
.progress {
background: #F5F5F5;
padding: 2px;
}
.progress .iceOutTxt {
display:block;
}
.progress .iceOutProg {
float:left;/*keep button on line */
}
.progress .iceCmdBtn {
width: 16px;
border:none;
background: url("../../imgs/Stop.gif") center no-repeat;
}
/* positioning of label and field cells in a columnClasses="label,field" DataTable
baseline works for default cases, but
- baseline in textarea inputs aligns to bottom textline
- tables or other composite values have no usable baseline
assign the .textarea class to rows with a textarea field or .composite to composite fields (ice rowClasses="...")
(use "input" class for other rows)
editors can fine-tune when needed
*/
td.label {
vertical-align: baseline;
/*text-align: right; looks less clean */
}
td.field {
vertical-align: baseline;
}
tr.textarea>td.label{
vertical-align: top;
padding-top: 6px;
}
tr.textarea>td.field{
vertical-align: top;
}
tr.composite>td.label {
padding-top: 6px; /*composites have usually border and padding around text*/
vertical-align: top;
}
tr.composite>td.field {
vertical-align: top;
}
/* component */
.folderChooser{
vertical-align: baseline;
}
/* tree formatting, line and node icons are 16x22 images, driving the spacing
(can't reduce row height without other imgs)*/
.folderChooserPopup .iceTree {
width: 300px; height: 300px;
border:1px solid #d9d9d9;
padding:2px;
overflow:auto;
}
.folderChooserPopup .iceTreeRow{
/*font-size: 0px; suppresses blanks between node icons but harms line height*/
/*vertical-align: bottom; useless*/
}
.folderChooserPopup .iceTreeRow>a { /* expand/collapse link */
display:inline-block; /* avoids rounding errors in vertical alignment */
}
.folderChooserPopup .iceTreeRow>.node{
/*improve [16x16][text] position against [16x22] +/-/| icons*/
padding: 2px 2px 2px 0px;
font-size: 13px; /*restore suppressed fontsize */
}
.folderChooserPopup .iceTreeRow>.node:HOVER{
text-decoration:none;/*override ice link*/
background-color: #D9F0FC; /*w7 armed button blue */
cursor: pointer;/*override ice*/
}
.folderChooserPopup .iceTreeRow>.node.selected,
.folderChooserPopup .iceTreeRow>.node.selected:HOVER{
background-color: #3399FF; /*w7 dropdown select */
}
.folderChooserPopup .iceTreeRow>.node.selected>.iceOutTxt{
color: #FFFFFF; /*white text on blue bg*/
}
.folderChooserPopup .iceTreeRow>.nodeEditor{
padding:2px;
}
.folderChooserPopup .-confirm>.interceptor {
/* see .interceptor */
position: absolute; /*in relation to fileselector popup*/
top: -1px; left: -1px; width: 100%; height: 100%;
border:1px solid black;/*cover popup area and popup border*/
background-color: black;
filter: alpha(50%); /*IE8*/
opacity: 0.5; /*IE9+/FF/Chrome*/
}
.folderChooserPopup .-confirm>.popup {
position:absolute;/*in relation to fileselector popup*/
left: 50%; width: 250px; margin-left: -125px; /*h-center*/
bottom: 100px;
background: #FFF;
border: 1px solid #d9d9d9;
}
.folderChooserPopup .-confirm>.popup>.icePnlPopHdr {
line-height: 2em; /*.ice style has vertical-align for td, but we are a div! */
}
.pageInfo{
position:absolute;bottom:10px;right:10px;
border:1px solid #e0e0e0;font-size: 8pt;
white-space: pre-line;
}
/*******************
APPLICATION STYLES
********************/
/*
styles of application modules, editors, entities
(ordered roughly by occurrence in application ui tree)
breadcrumb items [>] get style "submenu" or "separator" assigned by WebadminApplication
*/
.breadCrumb {
/*position of breadcr inside yellow bar*/
margin: 3px 3px 0px 5px;
}
.breadCrumbItem.iceMnuBarItem a,
.breadCrumbItem.iceMnuBarItem span {
font-weight: 700;/*override bold from tew.css*/
font-size: 14px;
}
.breadCrumbItem,
.breadCrumbItem.submenuItem,
.breadCrumbItem.separatorItem {
background: transparent;
}
.breadCrumbItem>a,
.breadCrumbItem.submenuItem>a,
.breadCrumbItem.separatorItem>a {
background: transparent;
}
.breadCrumbItem>a,
.breadCrumbItem>a:HOVER,
.breadCrumbItem.submenuItem>a,
.breadCrumbItem.submenuItem>a:HOVER,
.breadCrumbItem.separatorItem>a,
.breadCrumbItem.separatorItem>a:HOVER {
margin:0px;
padding:0px;
display:block; height: 19px;
}
.breadCrumbItem>a>.iceMnuItmImage,
.breadCrumbItem.submenuItem>a>.submenuItemImage,
.breadCrumbItem.separatorItem>a>.separatorItemImage {
margin:1px 2px 1px 2px;
}
.breadCrumbItem>a>span.iceMnuItmLabel{
display:inline;/*override block*/
vertical-align: middle;
padding:3px 3px 3px 3px;
}
.breadCrumbItem.submenuItem>a>span.submenuItemLabel,
.breadCrumbItem.separatorItem>a>span.separatorItemLabel {
display: none; /* render [>] without text */
}
/* login.xhtml styles */
.login {
/*login dialog component, bg color behind login logo, shadow */
visibility: visible;/*because in invisible popup div*/
position:absolute;
top: 280px; left: 50%;
width: 622px; height: 402px;/*img+border of body*/
margin-left: -311px;margin-top:-150px;/*centering*/
background: white;/*bg behind transparent login.png*/
border: 1px solid #d9d9d9;
border-bottom: 1px solid #ababab;
}
.login>.logo{
position:absolute;
width:620px;height:400px;
background: url("../../imgs/login.png") no-repeat right top;/* 620x400 */
border: 1px solid white;
}
.login>.body{
/*area in front of login logo usable for elements*/
position:absolute;
left: 80px; top: 160px;
width: 520px; height: 150px;
color: #001d33; /*F24 darkblue*/
}
.login>.body>.prompt {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
.login .localLogin .iceInpTxt,
.login .localLogin .iceInpSecrt {
margin: 4px; /*width given by