@import "compass/css3"; @import "settings/gradient"; @import "settings/vars"; /* Set up Variable Colors */ $windowBorder: #AAA; $dividerBorder: #888; $black90: rgba(0,0,0,.90); $black90hex: #141414; $white75: rgba(255,255,255,.75); $black75: rgba(0,0,0,.75); $black75hex: #404040; $white50: rgba(255,255,255,.50); $black50: rgba(0,0,0,.50); $black50hex: #7f7f7f; $white25: rgba(255,255,255,.25); $black25: rgba(0,0,0,.25); $black25hex: #bfbfbf; $black10: rgba(0,0,0,.10); $black10hex: #DFDFDF; $fontFamily: Arial, sans-serif; $frameBorderRadius: 6px; $buttonBorderRadius: 4px; $buttonBorder: #666; /* ========================= */ /* = Websheet Frame Set up = */ /* ========================= */ body { margin: 0 10px; font: normal 12px/16px Arial, sans-serif; color: #333; } div.ebaFrame { /* Setting display to table so that it extends when contents are extended*/ display: table; width: 100%; } div.ebaFrameHeader { min-height: 46px; } div.wsPaddedContentContainer { padding: 10px; } /* ================== */ /* = Websheet Title = */ /* ================== */ /*div.wsTitle { text-align: center; padding: 5px; text-shadow: 0 1px 0 $white50; color: #222; } div.wsTitle span { display: inline-block; font: bold 13px/14px $fontFamily; } div.wsTitle span em { display: inline-block; font: normal 13px/14px $fontFamily; }*/ div.wsToolbar { display: table; width: 100%; padding: 10px 0; } div.wsToolbar > div { display: table-cell; } div.wsToolbarLeft { padding: 0 0 0 8px; } div.wsToolbarRight { float: right; table.formlayout { /* Reset table for search container */ border-spacing: 0; border-collapse: collapse; td { padding: 0; } } } div.wsSearch { position: relative; width: 228px; margin-right: 10px; } div.wsSearch input { display: block; float: left; @include border-radius(20px); height: 24px; font: normal 14px/24px $fontFamily; width: 180px; padding: 0 24px; border: 1px solid $black50; @include box-shadow(0 1px 0 $white75, 0 1px 2px 0 $black25 inset); background: url(../img/eba_launchpad_searchbar.png) 0 0 no-repeat #FFF; margin: 0; color: #666; } div.wsSearch span { display: block; width: 18px; height: 18px; background: url(../img/eba_launchpad_searchbar.png) 0 -32px no-repeat #DDD; position: absolute; right: 4px; top: 4px; @include border-radius(20px); @include transition(background, .1s, linear); } div.wsSearch span:hover { background: url(../img/eba_launchpad_searchbar.png) 0 -32px no-repeat #AAA; } div.wsSearch span:active { background: url(../img/eba_launchpad_searchbar.png) 0 -32px no-repeat #C00; } /* Menu Bar */ ul.wsMenu { margin: 0; padding: 0; list-style: none; } ul.wsMenu > li { display: block; float: left; margin: 0 8px 0 0; position: relative; } ul.wsMenu > li.menuDisabled > a { @include opacity(0.5); cursor: default; } ul.wsMenu > li > a, ul.wsMenu > li.menuDisabled > a:active { display: block; float: left; color: $black75; text-shadow: 0 1px 0 $white75; text-decoration: none; font: bold 11px/24px $fontFamily; border: 1px solid $buttonBorder; padding: 0 0 0 10px; @include border-radius(4px); @include background-gradient-ie(#FFF,#CCC); @include box-shadow(0 1px 0 $white75, 0 1px 0 $white75 inset); } ul.wsMenu > li > a:active, ul.wsMenu > li > a.wsMenuActive, ul.wsMenu > li > a.wsMenuActive:active { color: #FFF; text-shadow: 0 0 1px rgba(255,255,255,.25); text-decoration: none; font: bold 11px/24px $fontFamily; border: 1px solid rgba(0,0,0,.8); border-bottom: transparent; padding: 0 0 0 10px; @include border-radius($buttonBorderRadius $buttonBorderRadius 0 0); background: $black90hex; background: $black90; filter: none; @include box-shadow(0 1px 0 rgba(255,255,255,.25) inset); } ul.wsMenu > li > a:active { @include border-radius($buttonBorderRadius); } ul.wsMenu > li > a > img, ul.wsMenu > li.menuDisabled > a:active > img { width: 20px; height: 24px; background: url(../img/ws_control_icons.png) 0 -33px no-repeat; vertical-align: top; border: 0; } ul.wsMenu > li > a:active > img, ul.wsMenu > li > a.wsMenuActive > img { background: url(../img/ws_control_icons.png) 0 -57px no-repeat; } ul.wsMenu > li.wsStandaloneMenu > a, ul.wsMenu > li.menuDisabled.wsStandaloneMenu > a { padding-right: 10px; } ul.wsMenu > li > ul { position: absolute; display: block; list-style: none; margin: 0; padding: 4px 0; top: 25px; left: 0; z-index: 1000; width: 250px; background: $black90; @include border-radius(0 4px 4px 4px); @include box-shadow(0 2px 4px rgba(0,0,0,.35)); display: none; } ul.wsMenu > li > ul li { display: block; } ul.wsMenu > li > ul li a { display: block; font: normal 13px/16px $fontFamily; padding: 4px 10px; color: #FFF; text-shadow: 0 0 1px $white25; text-decoration: none; position: relative; &.indentedItem { padding-left: 30px; } } ul.wsMenu > li > ul li a span { display: block; position: absolute; right: 0; top: 0; padding: 0 10px 0 0; font: normal 11px/24px $fontFamily; color: #DDD; color: $white75; } ul.wsMenu > li > ul li a:hover { @include background-gradient(#DDD,#CCC); color: #000; text-shadow: none; } ul.wsMenu > li > ul li a:hover span { color: #000; } ul.wsMenu > li > ul li.wsMenuSeparator { margin: 3px 0 0 0; border-top: 1px solid $white25; padding: 0 0 3px 0; } div.wsPageMessage { position: relative; width: 600px; margin: 0 auto 10px auto; text-align: center; @include background-gradient-ie(#F6F2A7,#F8F08A); border: 1px solid #d9c300; color: #474106; @include border-radius(4px); padding: 4px; font: normal 12px/16px Arial, $fontFamily; ul.htmldbUlErr { margin: 10px 10px 10px 20px; text-align: left; li a { color: #333; } } } div.wsErrorMessageSQL { position: relative; margin: 0 0 10px 0; @include background-gradient-ie(#F6F2A7,#F8F08A); border: 1px solid #d9c300; color: #474106; @include border-radius(4px); padding: 5px; font: normal 12px/16px Arial, $fontFamily; } div.wsPageMessage, div.wsErrorMessageSQL { a.wsCloseMessage { display: block; position: absolute; top: 0; right: 0; padding: 6px 10px 7px 6px; width: 10px; height: 11px; img { background: url(../img/ws_control_icons.png) -58px -40px no-repeat; height: 11px; width: 10px; @include opacity(0.5); } } } /* Bread Crumbs */ div.wsBreadcrumb { position: relative; margin: 0; } span.wsBreadcrumbBarLinks { display: block; position: absolute; right: 0; top: 0; } span.wsBreadcrumbBarLinks a { display: block; float: left; border-left: 1px solid #AAA; border-left: 1px solid rgba(0,0,0,.15); height: 24px; } span.wsBreadcrumbBarLinks a img { background-image: url(../img/ws_control_icons.png); background-repeat: no-repeat; display: block; border: none; } span.wsBreadcrumbBarLinks a img.wsMailIcon { background-position: -32px -195px; width: 16px; height: 14px; margin: 5px; } span.wsBreadcrumbBarLinks a img.wsPrintIcon { background-position: -16px -195px; width: 16px; height: 14px; margin: 5px; } span.wsBreadcrumbBarLinks a img.wsPresentationIcon { background-position: 0 -195px; width: 16px; height: 14px; margin: 5px; } div.wsBreadcrumb > ul { margin: 0 0 0 -1px; padding: 0; list-style: none; height: 24px; @include background-gradient(#F8F8F8,#DDD); @include box-shadow(0 -1px 0 $black25 inset); } div.wsBreadcrumb > ul > li { display: block; float: left; position: relative; } div.wsBreadcrumb > ul > li > a { display: block; float: left; font: bold 11px/24px $fontFamily; padding: 0 19px 0 9px; color: #666; text-shadow: 0 1px 0 $white75; text-decoration: none; background: url(../img/ws_bc.png) 100% 0 no-repeat; border-right: 1px solid $black10; border-left: 1px solid transparent; } div.wsBreadcrumb > ul > li > a:hover, div.wsBreadcrumb > ul > li:last-child > a:hover, div.wsBreadcrumb > ul > li.lastChild > a:hover, div.wsBreadcrumb > ul > li.active > a { color: #333; background: url(../img/ws_bc.png) 100% -50px no-repeat #FFF !important; border-right: 1px solid $windowBorder; border-left: 1px solid $windowBorder; } div.wsBreadcrumbSubPage > ul > li > a:hover, div.wsBreadcrumbSubPage > ul > li:last-child > a:hover, div.wsBreadcrumbSubPage > ul > li.lastChild > a:hover, div.wsBreadcrumbSubPage > ul > li.active > a { color: #333; background: url(../img/ws_bc.png) 100% 0 no-repeat transparent !important; border-right: 1px solid $black10; border-left: 1px solid transparent; } div.wsBreadcrumb > ul > li:last-child > a, div.wsBreadcrumb > ul > li.lastChild > a { color: #333; background: url(../img/ws_bc.png) 100% -100px no-repeat; } div.wsBreadcrumb > ul > li:last-child > a.noChildren, div.wsBreadcrumb > ul > li.lastChild > a.noChildren, div.wsBreadcrumb > ul > li:last-child > a.noChildren:hover div.wsBreadcrumb > ul > li.lastChild > a.noChildren:hover { background: none !important; border-right: 1px solid transparent; border-left: 1px solid transparent; padding: 0 9px 0 9px; } div.wsBreadcrumb > ul ul.wsBCSub li a img { border: none; vertical-align: text-bottom; margin-right: 5px; } div.wsBreadcrumb > ul ul.wsBCSub { display: none; position: absolute; top: 24px; left: 0; white-space: nowrap; z-index: 100; margin: 0; padding: 5px 0; @include border-radius(0 0 $buttonBorderRadius $buttonBorderRadius); background: #FFF; border: 1px solid $windowBorder; border-top: none; list-style: none; min-width: 200px; @include box-shadow(0 2px 2px $black25) } div.wsBreadcrumb > ul ul.wsBCSub li a { display: block; font: normal 11px/20px $fontFamily; color: #333; text-decoration: none; padding: 0 10px; } div.wsBreadcrumb > ul ul.wsBCSub li a:hover { background-color: #EEE; } /* Buttons */ a.ebaButton, a.ebaHotButton { float: left; display: block; font: normal 12px/24px $fontFamily; padding: 0 10px; text-align: center; @include background-gradient(#FFFFFF,#CCCCCC); margin: 0 10px 0 0; border: 1px solid $buttonBorder; @include border-radius($buttonBorderRadius); color: #222; text-shadow: 0 1px 0 rgba(255,255,255,.75); text-decoration: none; @include box-shadow(0 1px 0 $white75, 0 1px 0 $white25 inset); &:focus { outline: 1px dotted #666; } } a.ebaButton:active { @include background-gradient-ie(#D0D0D0,#AAAAAA); @include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset); } a.ebaHotButton { border: 1px solid #822024; @include background-gradient-ie(#EB0014,#C3000F); color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,.35); @include box-shadow(0 1px 0 $white75, 0 1px 0 $white50 inset); font-weight: bold; } a.ebaHotButton:active { @include background-gradient-ie(#CE0014,#A2000D); @include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset) } /* Next Button */ a.ebaNextButton { padding: 0 0 0 10px; img { width: 22px; height: 24px; background: url(../img/ws_control_icons.png) -24px -57px no-repeat; vertical-align: top; border: 0; } } /* Previous Button */ a.ebaPrevButton { padding: 0 10px 0 0; img { width: 22px; height: 24px; background: url(../img/ws_control_icons.png) -24px -33px no-repeat; vertical-align: top; border: 0; } } /* Next Button */ a.ebaDeleteButton, a.ebaCloseButton { padding: 0 10px 0 0; img { width: 24px; height: 24px; background: url(../img/ws_control_icons.png) -48px -33px no-repeat; vertical-align: top; border: 0; } } /* Disabled Button */ a.ebaDisabled { @include opacity(0.5); cursor: default; } /* ============================= */ /* = Websheet Content Sections = */ /* ============================= */ /* Set up Right / Left Containers */ div.ebaContent.ebaContentPadded { padding: 10px; } div.ebaContent div.ebaMainCol { padding: 10px; } div.ebaContent div.ebaSideCol { background: transparent none; border-left: 1px solid transparent; } /* Section Container */ div.wsSection { margin: 0 0 10px 0; &.wsForm h2 { border-bottom: none; } h2 { margin: 0; padding: 0; font: bold 14px/30px $fontFamily; color: #333; border-bottom: 1px solid #DDD; position: relative; /* Collapse / Expand Control */ a.wsSectionControl { display: block; float: left; img { width: 18px; height: 18px; display: block; margin: 6px 6px 6px 0; background: url(../img/eba_details_page_icons.png) 0 -46px no-repeat; border: none; } &.wsSectionCollapsed img { background: url(../img/eba_details_page_icons.png) 0 -28px no-repeat; } } /* Buttons Container */ span { position: absolute; right: 0; top: 0; a.wsSectionLink { display: block; float: left; margin: 6px 0 0 4px; font: normal 11px/14px $fontFamily; text-decoration: none; color: #666; padding: 2px 8px; @include border-radius(4px); border: 1px solid #EEE; @include transition(background border color, .2s); &:hover { border: 1px solid #BBB; color: #333; background-color: #F0F0F0; } img { border: none; vertical-align: baseline; } img.editIcon { width: 9px; height: 9px; background: url(../img/ws_control_icons.png) -30px -9px no-repeat; margin-right: 4px; } &:hover img.editIcon { background: url(../img/ws_control_icons.png) -30px 0 no-repeat; } img.tableIcon { width: 10px; height: 9px; background: url(../img/ws_control_icons.png) -57px -9px no-repeat; margin-right: 4px; } &:hover img.tableIcon { background: url(../img/ws_control_icons.png) -57px 0 no-repeat; } &.wsTopLink { padding: 3px 6px 1px 6px; } img.topIcon { width: 9px; height: 9px; background: url(../img/ws_control_icons.png) -39px 0 no-repeat; } &:hover img.topIcon { background: url(../img/ws_control_icons.png) -48px 0 no-repeat; } } } } div.wsSectionContent { margin: 10px 0 0 0; & > a { color: #000; font: normal 12px/16px $fontFamily; } pre { font: normal 11px/14px 'Menlo', 'Consolas', monospace; color: #666; } } /* Section Navigation */ ul.wsSectionNavigation { margin: 10px 0 0 10px; padding: 0; list-style: none; li { padding: 0; a { font: normal 12px/20px $fontFamily; color: #333 !important; text-decoration: none; &:hover { text-decoration: underline; } img { border: none; vertical-align: text-bottom; margin-right: 5px; } } } } /* Text and PLSQL Section */ div.wsTextSection { font: normal 12px/16px $fontFamily; p { margin: 0 0 10px 0; font: normal 12px/16px $fontFamily; } a { color: #666; } & > ul, & > ol { margin: 10px 0 10px 25px; padding: 0; } & > ul { list-style: square outside; li { font: normal 12px/16px; } ul { list-style: square outside; margin: 2px 0 2px 20px; padding: 0; } } &.noTableFormatting { table, th, td { border: none; padding-top: 0; padding-bottom: 0; } } table { border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; border-spacing: 0; border-collapse: collapse; td, th { border-left: 1px solid #CCC; border-top: 1px solid #CCC; padding: 5px; font: normal 12px/16px $fontFamily; color: #333; } th { text-align: left; background: #EEE; text-shadow: 0 1px 0 rgba(255,255,255,.75); font-weight: bold; } th > p { margin: 0; } } } } /* ====================== */ /* = Right Side Regions = */ /* ====================== */ /* Side */ div.wsSideSection { margin: 10px 10px 0 0; overflow: hidden; width: 190px; @include border-radius(4px); border: 1px solid $windowBorder; & > p { margin: 0; padding: 10px; color: #333; font: normal 11px/16px $fontFamily; } } div.wsSideSection:last-child { margin-bottom: 5px; } div.ebaSideCol div.wsSideSection h3 { @include border-radius(3px 3px 0 0); border-bottom: 1px solid #999; @include background-gradient(#EEE,#CCC); @include box-shadow(0 1px 0 $white75 inset); text-shadow: 0 1px 0 $white75; margin: 0; padding: 0 10px; font: bold 11px/24px $fontFamily; color: #333; position: relative; border-top: none; filter: none; &.wsControlPanelCollapsed { @include border-radius(2px); border-bottom: none; } } /* Section Buttons */ div.wsSideSection h3 span { display: block; position: absolute; top: 0; right: 0; } div.wsSideSection h3 span a { display: block; float: left; text-decoration: none; margin: 0; padding: 0 0 0 5px; @include transition(background, .1s); border-left: 1px solid rgba(0,0,0,.125); } div.wsSideSection h3 span a:last-child, div.wsSideSection h3 span a:only-child { @include border-radius(0 3px 0 0) } div.wsSideSection h3 span a:hover { background-color: rgba(0,0,0,.075); } div.wsSideSection h3 span a img.addIcon { width: 10px; height: 11px; display: block; float: left; margin: 7px 8px 6px 3px; background: url(../img/ws_control_icons.png) 0 0 no-repeat; border: none; } div.wsSideSection h3 span a img.viewAllIcon { width: 6px; height: 11px; display: block; float: left; margin: 7px 10px 6px 5px; background: url(../img/ws_control_icons.png) 0 -11px no-repeat; border: none; } div.wsSideSection h3 span a img.collapseIcon { float: left; background: url(../img/ws_control_icons.png) -10px 0 no-repeat; width: 10px; height: 11px; margin: 7px 8px 6px 3px; display: block; border: none; } div.wsSideSection h3 span a img.expandIcon { float: left; background: url(../img/ws_control_icons.png) -20px 0 no-repeat; width: 10px; height: 11px; margin: 7px 8px 6px 3px; display: block; border: none; } div.wsSideSection ul { margin: 0; padding: 5px 0; /* border: 1px solid $windowBorder;*/ /* border-top: none;*/ list-style: none; @include border-radius(0 0 4px 4px); background: #FFF; li { position: relative; a.annotationLink, a.annotationLinkOnly { display: block; color: #333; font: normal 12px/16px $fontFamily; padding: 4px 6px; text-decoration: none; width: 152px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; img { border: none; vertical-align: text-bottom; margin: 0 4px; } &:hover { background-color: #E8E8E8; } } /* annotation link that does not have a edit link to the side */ a.annotationLinkOnly { width: auto; } a.annotationAction { position: absolute; top: 0; right: 0; width: 24px; height: 24px; padding: 0 2px 0 0; border-left: 1px solid rgba(0,0,0,0.05); @include transition(background-color, .1s); &:hover { background: rgba(0,0,0,0.05); } img.editIcon { width: 9px; height: 9px; background: url(../img/ws_control_icons.png) -30px 0 no-repeat transparent; display: block; margin: 7px 7px 8px 8px; border: none; } img.viewIcon { width: 6px; height: 11px; display: block; float: left; margin: 7px 8px 6px 10px; background: url(../img/ws_control_icons.png) 0 -11px no-repeat; border: none; } } &:nth-child(2n) { background-color: #F8F8F8; } } /* Control Panel Links */ &.wsControlPanel { background: #EEE; li.wsSeparator { border-top: 1px solid #E0E0E0; border-bottom: 1px solid #F8F8F8; margin-top: 5px; margin-bottom: 5px; } li:nth-child(2n) { background-color: #EEE; } li { /* to fix strange outline bug when link if focused*/ position: static; } li a { display: block; color: #333; font: normal 12px/16px $fontFamily; padding: 4px 6px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; img { border: none; vertical-align: text-bottom; margin: 0 4px; } &:hover { text-decoration: none; background-color: #DDD; } } } /* Notes don't have underlinks or appear as links */ &.wsNotes li { a.annotationLink, a.annotationLinkOnly { cursor: default; &:hover { text-decoration: none; } } } } div.wsSideSection ul li.noData { display: block; color: #666; font: normal 11px/16px $fontFamily; padding: 4px 10px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* Files /* ================================= */ /* = Tooltips Formatting for qTip2 = */ /* ================================= */ .ui-tooltip-ws-notes { .ui-tooltip-titlebar, .ui-tooltip-content { border-color: #ccad14; background-color: #faf19c; color: #26230a; } .ui-tooltip-content span, .ui-tooltip-content em { color: #807320; } .ui-tooltip-titlebar { background-color: #f2dd3d; color: #4d4513; } } .ui-tooltip-ws-dark { .ui-tooltip-titlebar, .ui-tooltip-content { border: none; border-color: #171717; background-color: #171717; color: #F0F0F0; } .ui-tooltip-content span, .ui-tooltip-content em { color: #AAA; } .ui-tooltip-titlebar { background-color: #404040; background-color: rgba(0,0,0,.95); } } .ui-tooltip-ws-notes, .ui-tooltip-ws-dark { @include box-shadow(0 2px 2px 0 rgba(0,0,0,0.25)); @include border-radius(4px); font: normal 12px/16px $fontFamily !important; span { display: block; font: normal 11px/12px $fontFamily; margin-top: 3px; } em { display: block; font: normal 11px/12px $fontFamily; margin-bottom: 3px; } .ui-tooltip-content { @include border-radius(4px); min-width: 140px; max-width: 280px; padding: 6px; } .ui-tooltip-titlebar { @include border-radius(4px 4px 0 0); padding: 6px 6px 3px 6px; & + .ui-tooltip-contnet { padding: 3px 6px 6px 6px; } } .ui-tooltip-titlebar + .ui-tooltip-content{ @include border-radius(0 0 4px 4px); } } .ui-tooltip-ws-tags .ui-tooltip-content { min-width: 80px; span { margin: 3px; } } /* ================== */ /* = EBA Help Popup = */ /* ================== */ /* Popup */ body.wsPopup, html.wsPopup { margin: 0; padding: 0; height: 100%; & > form#wwvFlowForm { height: 100%; } } div.wsPopUpContent { display: table; width: 100%; height: 100%; &.simplePopUp { padding-top: 0 !important; } & > div { display: table-cell; vertical-align: top; } div.wsSideCol { width: 200px; background: #F0F0F0; @include box-shadow(-2px 0 5px -1px $black25 inset); div.apex-rds-container, ul.vertical-unordered-list-with-bullets-alt { width: 200px; } ul { margin: 0; padding: 0; list-style: none; li { border-bottom: 1px solid #DDD; } li a { display: block; padding: 7px 10px; font: normal 13px/16px $fontFamily; text-decoration: none; color: #666; text-shadow: 0 1px 0 $white75; &:hover { color: #333; } &.active { color: #333; background-color: #FFF; font-weight: bold; } } li.apex-rds-selected a { color: #333; background-color: #FFF; font-weight: bold; } } } div.wsMainCol { padding: 10px; background-color: #FFF; } } div.wsPopUpHeader { @include background-gradient-ie(#CCC,#EEE); @include box-shadow(0 1px 0 $white25 inset); border-bottom: 1px solid $windowBorder; width: 100%; div.wsTabs { height: 40px; @include box-shadow(0 2px 10px rgba(0,0,0,.15)); } div.wsTabs ul { margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; li { display: block; float: left; margin: 0; padding: 0; border-right: 1px solid $black25hex; border-right: 1px solid $black25; &.searchBox { padding: 7px 0 7px 7px; border-right: none; float: right; } a { display: block; float: left; padding: 0 15px; font: bold 11px/40px $fontFamily; text-decoration: none; text-shadow: 0 1px 0 $white75; color: #666; border-right: 1px solid transparent; border-left: 1px solid transparent; &:hover { @include background-gradient-ie(#DDD,#EEE); @include box-shadow(0 1px 0 $white25 inset); border-right: 1px solid #FFF; border-left: 1px solid #FFF; } &:active { @include background-gradient-ie(#AAA,#EEE); @include box-shadow(0 1px 0 $white25 inset); border-right: 1px solid #FFF; border-left: 1px solid #FFF; color: #555; } } &.active a, &.active a:hover, &.active a:active { @include background-gradient-ie(#EEE,#DDD); @include box-shadow(0 1px 0 $white25 inset); border-right: 1px solid #FFF; border-left: 1px solid #FFF; color: #333; } } } } /* ====================== */ /* = APEX Forms Styling = */ /* ====================== */ /* Override FCK Editor's Padding */ span.cke_skin_kama { padding: 0 !important; } div.formNoHighlight tr:hover td { background: none !important; } .wsFormRegion { fieldset { margin: 0; padding: 0; border: none; } &.wsSmallFormRegion table.formlayout { label, a { font: normal 11px/16px $fontFamily; } label.wsOptional a { font: bold 11px/16px $fontFamily; } label.wsOptional + br { display: none; } span.display_only { font: normal 11px/16px $fontFamily; } > tbody > tr > td { padding: 0 5px 5px 5px; } } table.formlayout { border-spacing: 0 0; border-collapse: collapse; & > tbody > tr { & > td { @include border-radius(4px); background-color: #FFF; @include transition(background-color, .1s); a.goToLink { display: inline-block; padding-left: 10px; color: #666; text-decoration: none; font: normal 12px/12px Arial, sans-serif; img { vertical-align: bottom; height: 11px; width: 6px; background: url(/i/eba/img/ws_control_icons.png) 0 -11px no-repeat; margin-left: 4px; } &:hover { text-decoration: underline; } } img.radioGroupImage { padding: 2px; border: 1px solid #CCC; @include box-shadow(0 1px 1px rgba(0,0,0,.15)); @include border-radius(2px); vertical-align: middle; margin: 0 0 15px 10px; } } & > td:first-child { @include border-radius(4px 0 0 4px); } & > td:last-child { @include border-radius(0 4px 4px 0); } &:hover > td { background-color: #F8F8F8; } &.rowHighlight > td { background-color: #F0F0F0; } } td.lov input.popup_lov { border: 1px solid $dividerBorder; padding: 6px; font: normal 14px/16px $fontFamily; @include border-radius(3px); @include box-shadow(0 1px 2px $black25); background-color: #F8F8F8; @include opacity(0.75); color: #333; @include transition(background-color border, .1s); } & > tbody > tr > td { padding: 5px 10px; &.wsLabelTop { padding: 10px; } input.text_field, select.selectlist, input.password, textarea { border: 1px solid $dividerBorder; padding: 6px; font: normal 14px/16px $fontFamily; @include border-radius(3px); @include box-shadow(0 1px 2px $black25); background-color: #F8F8F8; color: #333; &:focus { background-color: #FFF; border: 1px solid #666; } } textarea.codeTextarea { font: normal 11px/14px monospace; } select.selectlist { /* Add extra margin to get cell height same as single text field*/ margin: 6px 0 7px 0; } span.display_only, span.display_only a { font: normal 14px/16px $fontFamily; color: #333; } span.display_bold, span.display_bold a { font: bold 14px/16px $fontFamily; color: #333; } fieldset label { display: inline; } label { display: block; min-width: 120px; padding: 3px 40px 3px 0; font: normal 14px/16px $fontFamily; color: #666; span { display: none; } a { font: normal 14px/16px $fontFamily; color: #666; text-decoration: none; } &.wsRequired, &.wsRequired a { color: #666; font-weight: bold; } &.wsRequired img.wsAsterisk { width: 7px; height: 11px; background: url(../img/ws_control_icons.png) -10px -11px no-repeat; vertical-align: top; } } span.wsLabelError { font: normal 11px/12px $fontFamily; color: #EA0000; } } } } /* ========================== */ /* = Two Column Pane View = */ /* ========================== */ div.ebaTwoColPane { div.ebaSideCol { width: 320px; &.wsSideColCollapsed { width: 35px !important; h2 { width: 35px !important; overflow: hidden; height: 30px; span { display: none; } span.leftButtons { display: block; } a.ebaTitleButton { border-right: none; } a.ebaTitleButton img.showIcon { /* margin-left: 11px; margin-right: 16px;*/ } } ul { width: 35px !important; overflow: hidden; li h3 { display: none; } li a span img { margin-left: 5px !important; } } } ul.sectionList { /* Give this a width so the table cell does not collapse */ width: 320px; li a span { display: block; float: left; padding: 0; margin-right: 5px; img { border: none; margin: 8px 5px 8px 10px; width: 24px; height: 24px; background-image: url(../img/ws_control_icons.png); background-repeat: none; background-color: transparent; display: block; &.textIcon { background-position: 0 -81px; } &.plsqlIcon { background-position: -24px -81px; } &.chartIcon { background-position: -48px -81px; } &.dataIcon { background-position: 0 -105px; } &.nav_pageIcon, &.nav_sectionIcon { background-position: -24px -105px; } &.pageIcon { background-position: -48px -105px; } } } } ul.pageList { margin: 0; padding: 0; list-style: none; background: #FFF; /* Sub Level Lists */ ul { clear: both; margin: 0; padding: 0; list-style: none; > li { div.pageListOut {padding-left: 20px;} & ul > li { div.pageListOut {padding-left: 40px;} & ul > li { div.pageListOut {padding-left: 60px;} & ul > li { div.pageListOut {padding-left: 80px;} } } } } } li { padding: 0; div.pageListOut { border-bottom: 1px solid #DDD; } div.pageListIn { position: relative; } &.active { > div.pageListOut { @include background-gradient(#E6E6E6,#C6C6C6); border-bottom: 1px solid #AAA; } } /* Sub Lists Hidden by Default &.containsSubList ul { display: none; } */ } /* Color every other list item different color */ div.alternateRow { background-color: #F8F8F8; } a { font: bold 12px/12px $fontFamily; color: #333; text-decoration: none; white-space: nowrap; display: block; padding: 8px 0; margin: 0 0 0 20px; text-shadow: 0 1px 0 #FFF; em { display: block; font: normal 11px/12px $fontFamily; } &.listControl { position: absolute; left: 0; top: 0; height: 11px; width: 10px; padding: 0; margin: 15px 5px 14px 5px; &.expanded { background: url(../img/ws_control_icons.png) -10px 0 no-repeat; } &.collapsed { background: url(../img/ws_control_icons.png) 2px -11px no-repeat; height: 11px; } } } } } } /* ============== */ /* = Panel Menu = */ /* ============== */ #ui-tooltip-panelMenu { .ui-tooltip-content { padding: 5px 0; } } div.panelMenuContainer { display: none; } div.panelMenu { ul { margin: 0; padding: 0; list-style: none; li { a { display: block; font: normal 13px/24px $fontFamily; padding: 0 10px; color: #FFF; text-shadow: 0 0 1px $white25; text-decoration: none; position: relative; &:hover { @include background-gradient(#DDD,#CCC); color: #000; text-shadow: none; } } } } } /* ================= */ /* = Small Buttons = */ /* ================= */ a.wsSmallButton { display: block; float: left; font: normal 11px/14px $fontFamily; padding: 4px 10px; margin: 6px 0 6px 6px; @include background-gradient-ie(#EEE,#DDD); @include border-radius(2px); border: 1px solid #969696; color: #444; font-weight: bold; text-shadow: 0 1px 0 $white75; text-decoration: none; @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 0 $white75 inset); &:hover { @include background-gradient-ie(#FFF,#EEE); } &:active { @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset); @include background-gradient-ie(#DDD,#CCC); } img.smallPrevIcon, img.smallNextIcon { width: 5px; height: 10px; margin: 2px 0; vertical-align: bottom; } img.smallPrevIcon { background: url(../img/ws_control_icons.png) -30px -18px no-repeat; } img.smallNextIcon { background: url(../img/ws_control_icons.png) -35px -18px no-repeat; } } a.wsSmallButton.wsHotButton { border: 1px solid #822024; @include background-gradient-ie(#EB0014,#C3000F); color: #FFF; @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 0 $white50 inset); text-shadow: 0 -1px 0 rgba(0,0,0,.35); font-weight: bold; &:hover { @include background-gradient-ie(#FB2034,#D3202F); } &:active { @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset); @include background-gradient-ie(#CE0014,#A2000D); } img.smallPrevIcon { background: url(../img/ws_control_icons.png) 0 -22px no-repeat; } img.smallNextIcon { background: url(../img/ws_control_icons.png) -5px -22px no-repeat; } } /* ===================== */ /* = Data Panel Styles = */ /* ===================== */ div.wsActionBar { &.wsActionBarOnly { border-bottom: 1px solid $windowBorder; @include border-radius(2px); margin-bottom: 10px; } &.wsActionBarBottom { border-top: none; border-bottom: 1px solid $windowBorder; @include border-radius(0 0 2px 2px); div.wsActionBarInside { border-top: 1px solid #F0F0F0; } } background-color: #F8F8F8; border: 1px solid $windowBorder; border-bottom: none; height: 36px; position: relative; @include border-radius(2px 2px 0 0); ul { list-style: none; margin: 0 0 0 6px; padding: 0; height: 22px; li { display: block; float: left; margin: 6px 0; a { display: block; float: left; font: normal 11px/14px $fontFamily; padding: 4px 10px; @include background-gradient-ie(#E6E6E6,#D6D6D6); border: 1px solid #969696; border-left: none; color: #444; font-weight: bold; text-shadow: 0 1px 0 $white75; text-decoration: none; @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 0 $white75 inset); &.active, &:hover { @include background-gradient-ie(#FFF,#EEE); color: #444; } } &:first-child a { @include border-radius(2px 0 0 2px); border-left: 1px solid #969696; } &:last-child a { @include border-radius(0 2px 2px 0); } } } span.wsActionBarRight { position: absolute; right: 0; top: 0; a.wsSmallButton { margin: 6px 6px 6px 0; } } span.wsRowNavigation { margin-right: 6px; strong { font-size: inherit; } a.wsSmallButton { margin: 6px 0; &.disabledButton { filter: none; background: #F0F0F0; cursor: default; &:hover { filter: none; background: #F0F0F0; } img { @include opacity(0.25); } } &:first-child { @include border-radius(2px 0 0 2px); } &:last-child { @include border-radius(0 2px 2px 0); } } span { display: block; font: normal 11px/14px $fontFamily; border-top: 1px solid #969696; border-bottom: 1px solid #969696; padding: 4px 10px; float: left; margin: 6px 0; background: #FFF; @include box-shadow(0 1px 0 rgba(0,0,0,.10)); color: #888; strong { color: #333; } } } div.wsSmallFormComponent { margin: 7px 5px; position: absolute; right: 0; top: 0; &.wsSmallFormComponentLeft { position: relative; margin: 5px; } table.formlayout { border-collapse: collapse; border-spacing: 0; a.wsSmallButton { margin: 0 0 0 6px; } label.wsRequired, label.wsOptional { margin-right: 5px; a.helpTip { font: normal 12px/16px $fontFamily; color: #444; text-decoration: none; cursor: default; } span { display: none; } } } } } /* ============================== */ /* = Styling Interactive Report = */ /* ============================== */ .apexir_COLUMN_SELECTOR { background-color: #FFF; margin: 6px 0 6px 6px; height: 22px; border: 1px solid #AAA; border-right: none; padding: 0; @include box-shadow(0 1px 0 rgba(0,0,0,.1)); @include border-radius(2px 0 0 2px); } #apexir_SEARCHDROPROOT.apexir_SEARCHICON { background: url(../img/ws_control_icons.png) -40px -18px no-repeat; width: 21px; height: 14px; margin: 4px; } .apexir_SEARCH { padding: 0; margin: 6px 0; height: 22px; border: 1px solid #AAA; border-left: none; background: #FFF; @include box-shadow(0 1px 0 rgba(0,0,0,.1)); @include border-radius(0 2px 2px 0); } /* input field*/ input#apexir_SEARCH { padding: 4px; border: none; height: 14px; font: normal 14px/14px $fontFamily; display: block; float: left; } button.apexir-go-button { border: none; @include background-gradient-ie(#EEE,#DDD); margin: 0; display: block; float: left; height: 22px; border-left: 1px solid $windowBorder; padding: 0 6px; &:hover { @include background-gradient-ie(#FFF,#EEE); } } button.apexir-go-button span { font: bold 11px/22px $fontFamily; background: none transparent; height: auto; padding: 0; color: #444; text-shadow: 0 1px 0 $white75; } #apexir_SEARCH_COLUMN_DROP { padding: 0; color: #888; margin: 6px 0; background-color: #FFF; border-top: 1px solid #AAA; border-bottom: 1px solid #AAA; height: 22px; font: normal 13px/22px $fontFamily; @include box-shadow(0 1px 0 rgba(0,0,0,.1)); } .apexir_SAVED_REPORTS { padding: 0; margin: 6px 6px 6px 0; height: 24px; label { font: normal 11px/24px $fontFamily; display: inline-block; color: #666; margin: 0 6px; } } #apexir_SEARCH_BAR_OPTIONS { padding: 0; margin: 6px 0; height: 22px; .irr-pill { /* background: transparent !important;*/ width: 30px; height: 22px; @include background-gradient-ie(#E8E8E8,#DDD); border: 1px solid #969696; border-left: none; @include box-shadow(0 1px 0 rgba(0,0,0,.1)); &:hover { @include background-gradient-ie(#FFF,#EEE); } span { position: relative; top: 0; text-indent: -9999px; width: 22px; height: 22px; display: block; margin: 0 4px; } } .irr-pill-icons-left-active, .irr-pill-icons-left, .irr-pill-group, .irr-pill-group-active, .irr-pill-chart, .irr-pill-chart-active, .irr-pill-report, .irr-pill-report-active { border-left: 1px solid #969696; @include border-radius(2px 0 0 2px); } .irr-pill-icons-report-active, .irr-pill-icons-report { @include border-radius(0 2px 2px 0); } .irr-pill-icons-left-active span { background: url(../img/ws_control_icons.png) 0 -129px no-repeat !important; } .irr-pill-icons-left span { background: url(../img/ws_control_icons.png) 0 -151px no-repeat !important; } .irr-pill-report-right-active span, .irr-pill-report-active span { background: url(../img/ws_control_icons.png) -22px -129px no-repeat !important; } .irr-pill-report-right span, .irr-pill-report span { background: url(../img/ws_control_icons.png) -22px -151px no-repeat !important; } .irr-pill-group span { background: url(../img/ws_control_icons.png) -44px -151px no-repeat !important; } .irr-pill-group-active span { background: url(../img/ws_control_icons.png) -44px -129px no-repeat !important; } .irr-pill-chart span { background: url(../img/ws_control_icons.png) 0 -233px no-repeat !important; } .irr-pill-chart-active span { background: url(../img/ws_control_icons.png) 0 -211px no-repeat !important; } .irr-pill-icons-left-active, .irr-pill-report-right-active, .irr-pill-group-active, .irr-pill-chart-active, .irr-pill-report-active { @include background-gradient-ie(#FFF,#EEE); } } .apexir_ACTION_MENU, .apexir_WEBSHEET_MENU { padding: 0; margin: 6px 0 6px 6px; display: block; float: left; button#apexir_ACTIONSMENUROOT, button#apexir_WEBSHEETSMANAGE { display: block; float: left; margin: 0; padding: 0 8px 0 10px; height: 24px; border: 1px solid #969696; @include box-shadow(0 1px 0 rgba(0,0,0,.1)); @include border-radius(2px); @include background-gradient-ie(#EEE,#DDD); &:hover { @include background-gradient-ie(#FFF,#EEE); } &.dhtmlMenuOn { @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset); @include background-gradient-ie(#DDD,#CCC); } span { padding: 0 10px 0 0; margin: 0; display: block; height: 22px; font: bold 11px/22px $fontFamily; color: #444; text-shadow: 0 1px 0 $white75; background: url(../img/ws_control_icons.png) 100% -173px no-repeat; } } } #apexir_TOOLBAR_OPEN { background: none; height: auto; float: none; display: block; border: 1px solid $windowBorder; border-top: none; background-color: #F8F8F8; @include border-radius(0 0 2px 2px); @include box-shadow(0 1px 0 rgba(0,0,0,.1)); } #apexir_TOOLBAR_CLOSE { border-top: 1px solid #EEE; background: none; padding: 0; float: none; height: 36px; } #apexir_WORKSHEET_REGION { padding: 0; float: none; display: block; } #apexir_TOOLBAR { padding: 0; float: none; position: relative; } .apexir_BUTTONS { margin: 7px; padding: 0; position: absolute; top: 0; right: 0; a.wsSmallButton { margin: 0 0 0 6px; } table { width: auto !important; } } .apexir_RIGHT_BUTTONS { float: right; } /* Interactive Report that has no Action Bar above it */ div.wsInteractiveReportOnly { #apexir_TOOLBAR_OPEN { border-top: 1px solid $windowBorder; @include border-radius(2px); } #apexir_TOOLBAR_CLOSE { border-top: none; } } #apexir_CONTROL_PANEL_COMPLETE { a { color: #333; } } /* ============================ */ /* = Interactive Report Table = */ /* ============================ */ #apexir_WORKSHEET { padding: 10px 0; } #apexir_DATA_PANEL { margin: 0; } #apexir_DATA_PANEL > table, #apexir_GROUP_BY > table { border-spacing: 0 0; /* width: 100%;*/ .apexir_WORKSHEET_DATA { /* width: 100%;*/ th { border-top: none; background: none; border-bottom: 1px solid #DDD; text-align: left; padding-bottom: 7px; div { margin: 0; padding: 7px 15px 0 0; color: #444; font: bold 13px/16px $fontFamily; text-decoration: none; letter-spacing: normal; &:hover { text-decoration: underline; }; } &.current { border-left: none; border-right: none; } } td { border-bottom: 1px solid #DDD; border-top: none; background: none #FFF; padding: 7px 15px 7px 0; font: normal 12px/16px $fontFamily; color: #444; @include transition(background-color, .1s); a { color: #444; text-decoration: underline; } p { margin: 0; } div.edit { cursor: pointer !important; } } &.apexir_WORKSHEET_ICONS td { border-bottom: none; a { text-decoration: none; font: normal 12px/16px $fontFamily; } } tr.odd:hover td, tr.even:hover td { background-color: #F0F0F0 !important; } } td.pagination { padding: 5px 0; span.fielddata { font: normal 11px/16px $fontFamily; color: #666; } } } /* ==================== */ /* = APEX IR Rollover = */ /* ==================== */ /* Roll Over IR */ #apexir_rollover { border: 1px solid $windowBorder; @include border-radius(3px); padding: 0; background: none #FFF !important; @include box-shadow(0 1px 1px rgba(0,0,0,.15)); } #apexir_rollover table { @include border-radius(3px 3px 0 0); background-color: #F0F0F0; border-bottom: 2px solid #DDD; } #apexir_rollover table td { padding: 0 5px; text-align: center; } #apexir_rollover table td input{ width: 90% !important; margin: 0 5px 5px 5px !important; padding: 4px; font: normal 14px/14px $fontFamily; @include border-radius(2px); border: 1px solid $dividerBorder; } #apexir_rollover table span { background-color: transparent; padding: 2px; height: 20px; } #apexir_rollover table span:hover { border: 1px solid $windowBorder; background-color: #CCC; @include border-radius(2px); } #apexir_rollover #apexir_rollover_content { padding: 3px 0; } #apexir_rollover #apexir_rollover_content a { background: #FFF; font: normal 11px/20px $fontFamily; padding: 0 5px !important; width: auto !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #apexir_rollover #apexir_rollover_content a:hover { background-color: #F0F0F0; } /* Filter / Sort Dialogs */ div#apexir_CONTROL_PANEL_DROP { background: none #F8F8F8; border: 1px solid $windowBorder; @include border-radius(3px); @include box-shadow(0 1px 0 rgba(0,0,0,.10)); padding: 6px; margin: 10px 0; font: normal 12px/16px $fontFamily; td.fielddatabold { color: #333; font: bold 13px/32px $fontFamily; } a.itemlink { color: #333; font: normal 11px/16px Arial, sans-serif; } } button.apexir-button { /* display: block; float: left;*/ margin: 0; padding: 0 10px; height: 24px; border: 1px solid #969696; @include box-shadow(0 1px 0 rgba(0,0,0,.1)); @include border-radius(2px); @include background-gradient-ie(#EEE,#DDD); &:hover { @include background-gradient-ie(#FFF,#EEE); } span { padding: 0; margin: 0; display: block; height: 24px; font: bold 11px/22px $fontFamily; color: #444; text-shadow: 0 1px 0 $white75; background: none; } } /* ==================== */ /* = Actions Sub Menu = */ /* ==================== */ .dhtmlSubMenu { margin: 2px 0 0 0; font: normal 12px/40px Arial, sans-serif; @include border-radius(3px); background: none #FFF; padding: 3px 0; @include box-shadow(0 1px 1px rgba(0,0,0,.15)); border: 1px solid $windowBorder; li.dhtmlMenuSep { img { display: none; } border-bottom: 1px solid #DDD; padding-bottom: 5px; margin-bottom: 5px; line-height: 1px; font-size: 1px; background: #FFF; } li { &.dhtmlSubMenuSelected a { background-color: #F0F0F0; font-weight: bold !important; } a { color: #333 !important; padding: 0; margin: 0; border: none; background: #FFF; span { color: #333; } &.dhtmlSubMenuN, &.dhtmlSubMenuS { font: normal 12px/16px $fontFamily; border: none; padding: 5px; margin: 0; &:hover { border: none; }; } &:hover { color: #333 !important; background-color: #F0F0F0 !important; border: none; span { color: #333; } } img { display: none; &.htmldbMIMG { display: block; margin: 4px 2px 0 0; } } } } } /* ========================== */ /* = Column Search Selector = */ /* ========================== */ #apexir_columnsearch { @include border-radius(3px); backround: none #FFF; padding: 3px 0; @include box-shadow(0 1px 1px rgba(0,0,0,.15)); border: 1px solid $windowBorder; & > a { display: block; width: auto !important; padding: 5px !important; font: normal 12px/16px $fontFamily; color: #444; &:hover { background-color: #F0F0F0; } } } /* =========================================== */ /* = Table Formatting for Add/Edit Row Pages = */ /* =========================================== */ table.apex_finderbar .fielddata{ font: normal 11px/12px $fontFamily; } table.wsTable, table.worksheet_detail { &.wsPortlet { width: 100%; th, td { border-top: 1px dotted #DDD; } td { text-align: right; } tr:first-child th, tr:first-child td { border-top: none; } } border-collapse: collapse; border-spacing: 0; td.groupName { font: bold 13px/20px $fontFamily; text-align: left; color: #333; padding: 0 10px 5px 0; vertical-align: top; text-align: left; } th { padding: 0 10px 5px 0; vertical-align: top; text-align: left; } th, td { label { min-width: 120px; padding-right: 20px; font: normal 12px/20px $fontFamily; color: #666; a { text-decoration: none; color: #666; &:hover { color: #333; } } } } span.helpText { display: none; } td { padding: 0 0 5px 10px; vertical-align: top; font: normal 11px/20px $fontFamily; color: #333; input.textField, input.hasDatepicker, textarea.textArea, select.selectList { margin: 0; border: 1px solid #AAA; padding: 2px; font: normal 12px/14px $fontFamily; @include border-radius(2px); @include box-shadow(1px 1px 1px rgba(0,0,0,.15) inset); background-color: #FFF; color: #333; @include transition(background-color, .1s); &:focus { background-color: #F0F0F0; border: 1px solid #666; } } input.textField, input.hasDatepicker, select.selectList { min-width: 200px; } textarea.textArea { min-width: 400px; } } tbody tr:last-child { th, td { padding-bottom: 15px; } } tbody:last-child tr:last-child { th, td { padding-bottom: 5px; } } fieldset.textarea_resizable { padding: 0; margin: 0; textarea { margin: 0; } } &.wsPortletReport { th { min-width: 180px; } } } /* ===================================================== */ /* = Report Formatting for Reports inside of a Section = */ /* ===================================================== */ div.wsSection div.wsSectionReport { /* Float Left so that top action bar only stretches to the table width */ float: left; min-width: 440px; table { border-collapse: collapse; border-spacing: 0 0; th { background-color: transparent; border: none; border-bottom: 1px solid #DDD; padding: 8px 10px 8px 0; font: bold 11px/14px Arial, sans-serif; color: #333; } td { border: none; border-bottom: 1px solid #EEE; padding: 8px 10px 8px 0; font: normal 12px/14px Arial, sans-serif; } tr:hover td { background-color: #F8F8F8; } } table.wsReportStyle1 { border: 1px solid #AAA; th { border-bottom: 1px solid #AAA; padding: 8px 10px; @include background-gradient-ie(#F8F8F8,#EEE); text-shadow: 0 1px 0 rgba(255,255,255,.75); } td { padding: 5px 10px; border-top: 1px solid #DDD; border-bottom: none; } } table.wsReportStyle2 { border: none; th { border-bottom: 1px solid #AAA; padding: 5px 10px; } td { padding: 5px 10px; border-bottom: 1px solid #DDD; } tr:last-child td { border-bottom: none; } } table.wsReportStyle3 { border: none; th { border-bottom: 2px solid #CCC; padding: 5px 10px; text-shadow: 0 1px 0 rgba(255,255,255,.75); vertical-align: bottom; } td { padding: 5px 10px; border-left: 1px solid #DDD; border-bottom: 1px solid #EEE; } tr td:last-child { border-right: 1px solid #CCC; } tr td:first-child { border-left: 1px solid #CCC; } tr:last-child td { border-bottom: 1px solid #CCC; } tr:hover td { background-color: #F2F2F2; } } } /* =============== */ /* = Annotations = */ /* =============== */ ul.wsTagsLinks { margin: 0; padding: 0; list-style: none; li { display: inline-block; margin: 0 5px 0 0; padding: 0; a { display: inline-block; border: 1px solid $windowBorder; background-color: #F0F0F0; @include border-radius(2px); @include box-shadow(0 1px 0 rgba(0,0,0,.15)); font: normal 12px/20px Arial, sans-serif; color: #333; text-decoration: none; padding: 0 8px; &:hover { background-color: #FFF; } } } } div.wsSectionContent ul.wsNotes li { margin: 0 0 10px 0; } ul.wsNotes { margin: 0; padding: 0; list-style: none; li { padding: 0; margin: 0; &:last-child { margin-bottom: 0; } div { padding: 5px; @include border-radius(3px); font: normal 12px/16px Arial, sans-serif; color: #26230A; background-color: #FAF19C; border: 1px solid #CCAD14; } span { display: block; background: url(../img/ws_control_icons.png) -62px -23px no-repeat; margin: -1px 0 0 5px; padding: 2px 0 0 15px; color: #666; font: normal 11px/12px Arial, sans-serif; a { color: #333; font: normal 11px/12px Arial, sans-serif; text-transform: lowercase; text-decoration: none; margin: 0 0 0 5px; &:hover { text-decoration: underline; } } } } } /* =================== */ /* = Standard Report = */ /* =================== */ table.wsStandardReport { min-width: 600px; border-spacing: 0; border-collapse: collapse; @include box-shadow(0 1px 0 rgba(0,0,0,.15)); border-left: 1px solid #AAA; border-right: 1px solid #AAA; th { @include background-gradient-ie(#F0F0F0,#E0E0E0); margin: 0; padding: 0 10px; font: bold 12px/30px Arial, sans-serif; color: $black75hex; text-shadow: 0 1px 0 $white75; border-top: 1px solid #AAA; border-bottom: 1px solid #AAA; } th, td { &.rightAligned { text-align: right; } &.iconCol { width: 1%; padding-right: 5px; padding-left: 5px; } } tr { &:last-child td { border-bottom: 1px solid #AAA; } td { border-bottom: 1px solid #D8D8D8; padding: 5px 10px; color: #333; input { display: block; margin: 0; border: 1px solid #AAA; padding: 2px; font: normal 12px/14px $fontFamily; height: 14px; @include border-radius(2px); @include box-shadow(1px 1px 1px rgba(0,0,0,.15) inset); background-color: #FFF; color: #333; @include transition(background-color, .1s); &:focus { background-color: #F0F0F0; border: 1px solid #666; } } a { color: #333; } } } } table.wsAnnotationsData { width: 100%; tr { &.hasImage { td { border-bottom: none; padding-bottom: 0; } } td { img.inlineImgAttachment { max-width: 100%; } } } } /* ================================= */ /* = Search Field (for Action Bar) = */ /* ================================= */ .ie7 { div.searchField { input { /* border: none !important; height: 16px; font: normal 12px/16px $fontFamily;*/ background: white !important; } } } div.searchField { display: block; float: left; margin: 6px; background: #FFF; height: 22px; border: 1px solid #969696; @include box-shadow(0 1px 0 rgba(0,0,0,.10)); @include border-radius(2px); span.searchIcon { display: block; float: left; padding: 4px 0 4px 4px; img { display: block; width: 14px; height: 14px; background: url(../img/ws_control_icons.png) -40px -18px no-repeat; } } input { display: block; float: left; height: 18px; font: normal 12px/18px $fontFamily; border: none; padding: 2px; color: #333; } /*Placeholder Styling*/ /* input::-webkit-input-placeholder { color: #999; } input:-moz-placeholder { color: #999; }*/ a.wsSmallButton { border: none; border-left: 1px solid #969696; @include box-shadow(0 1px 0 rgba(255,255,255,.75) inset); @include border-radius(0 2px 2px 0); margin: 0; &:active { @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset); @include background-gradient-ie(#DDD,#CCC); } } } div.wsSection div.wsTextSection div.wsSectionReport { a.wsSmallButton { color: #444; } a.wsHotButton { color: #FFF; } /* table { border-bottom: inheri; th, td { border: none; } th { background-color: transparent; } }*/ } /* =============== */ /* = Login Page = */ /* =============== */ div.ebaWizardFrame { &.ebaLoginWizard { width: 640px; div.wsFormRegion table.formlayout { label + br { display: none; } } } div.loginFormFields { float: right; width: 370px } div.websheetsIcon { float: left; width: 240px } } /* ======================== */ /* = Page Navigation Tree = */ /* ======================== */ div.tree ul { li a { font: normal 12px/20px $fontFamily; height: 20px; padding: 2px 4px 2px 2px; color: #333; border: 1px solid transparent; @include transition(background border, .2s); &:hover { background-color: #F0F0F0; border-color: #E0E0E0; @include border-radius(2px); height: 20px; padding: 2px 4px 2px 2px; } &.clicked, &.clicked:hover { background-color: #E0E0E0; border-color: #D0D0D0; @include border-radius(2px); height: 20px; padding: 2px 4px 2px 2px; } ins { height: 20px; width: 16px; background: url(../img/ws_control_icons.png) -52px -107px no-repeat; } } } /* ============= */ /* = Popup LOV = */ /* ============= */ body.wsPopUpLOV { margin: 10px; input.searchField { padding: 4px; border: none; font: normal 12px/16px $fontFamily; color: #333; border: 1px solid #969696; margin: 6px 0 6px 6px; height: 24px; background: #FFF; @include box-shadow(0 1px 0 rgba(0,0,0,.1)); @include border-radius(0 2px 2px 0); } input.smallButton { font: normal 11px/14px $fontFamily; padding: 4px 10px; margin: 6px 0 6px 6px; @include background-gradient-ie(#EEE,#DDD); @include border-radius(2px); border: 1px solid #969696; color: #444; font-weight: bold; text-shadow: 0 1px 0 $white75; text-decoration: none; @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 0 $white75 inset); &:hover { @include background-gradient-ie(#FFF,#EEE); } &:active { @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset); @include background-gradient-ie(#DDD,#CCC); } &.hotButton { border: 1px solid #822024; @include background-gradient-ie(#EB0014,#C3000F); color: #FFF; @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 0 $white50 inset); text-shadow: 0 -1px 0 rgba(0,0,0,.35); font-weight: bold; &:hover { @include background-gradient-ie(#FB2034,#D3202F); } &:active { @include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset); @include background-gradient-ie(#CE0014,#A2000D); } } } div.lovLinks { a { display: block; font: normal 12px/16px $fontFamily; padding: 5px 0; border-bottom: 1px solid #E0E0E0; color: #333; text-decoration: none; &:hover { background-color: #F0F0F0; } } br { display: none; } } div.lovPagination { text-align: center; font: normal 11px/16px $fontFamily; color: #888; padding: 10px 0; } } div.wsFooter { margin: 10px 0; position: relative; p { font: normal 11px/16px Arial, sans-serif; margin: 0; color: #666; &.alignRight { float: right; text-align: right; } a { color: #333; } } ul.wsViewModes { margin: 0; padding: 0; list-style: none; position: absolute; right: 0; top: 0; li { float: left; border-left: 1px solid #EEE; padding: 0 5px; height: 16px; &:first-child { border-left: none; } &:last-child { padding-right: 0; } a { font: normal 11px/12px Arial, sans-serif; color: #666; text-decoration: none; @include transition(color, .1s, linear); &.active { color: #333; font-weight: bold; } &:hover { color: #333; } } } } } /* Accessibility */ .hideMeButHearMe { position: absolute; left: -99999px; overflow: hidden; } /* ============================= */ /* = Calendar for Page History = */ /* ============================= */ /**/ .CalendarHolder { width: 100%; } .CalendarHolder .MonthTitle { text-align: left; color: #444; /* background-color: #D2D2D2;*/ font: bold 16px/16px Arial, sans-serif; padding: 10px 0 5px 0; text-shadow: 0 1px 0 rgba(255,255,255,1); /* border: 1px solid #BBB;*/ border-bottom: none; } .Calendar { border: 0; width: 100%; /* border-right: 1px solid #BBB;*/ } .Calendar .DayOfWeek { font: normal 11px/20px Arial, sans-serif; white-space: nowrap; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,1); /* background-color: #D2D2D2;*/ text-transform: capitalize; padding: 0 0 5px 0; border-bottom: 1px solid #999; text-align: left; } .Calendar .DayOfWeek:first-child { /* border-left: 1px solid #BBB;*/ } .Calendar td:first-child { border-left: 1px solid #EEE; } .Calendar td { width: 75px; height: 75px; width: 14%; padding: 0; border-right: 1px solid #EEE; border-bottom: 1px solid #BBB; font: bold 13px/13px Arial, sans-serif; background-color: #FFF; } .Calendar td.Day a { display: inline-block; padding: 0 5px 5px 5px; font: normal 11px/16px Arial, sans-serif; color: #333; } .Calendar td.Day br { display: none; } .Calendar .DayTitle { padding: 5px 5px; font: normal 12px/12px Arial, sans-serif; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,1); } .Calendar .Day { background-color: #FFF; vertical-align: top; } .Calendar .NonDayTitle { padding: 5px 5px; font: normal 12px/12px Arial, sans-serif; color: #AAA; text-shadow: 0 1px 0 rgba(255,255,255,1); } .Calendar .NonDay { } .Calendar .WeekendDayTitle { padding: 5px 5px; font: normal 12px/12px Arial, sans-serif; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,1); } .Calendar .WeekendDay { background-color: #FFF; } .Calendar .Today { vertical-align: top; background-color: #F2F2F2; } .Calendar .Today .DayTitle { /* background-color: #FFFFFF*/ } /* ============== */ /* = EBA Header = */ /* ============== */ body { background: url(../img/eba_body_noise.png) !important; } /* ======================================== */ /* = Header Bar for Express Applications = */ /* ======================================== */ .ebaHeader { height: 41px; overflow: hidden; margin: 0 -10px 10px -10px; border-bottom: 1px solid rgba(0,0,0,.0); -webkit-transition: background-color .2s linear, border .2s linear; } /* CSS Transition for Hover*/ .ebaHeader:hover { background-color: rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.10); } .ebaHeader:hover ul li { border-right: 1px solid rgba(0,0,0,.1); } /* Application Name + Oracle Logo */ .ebaHeader h1 { margin: 11px 0 10px 0; padding: 0; float: left; text-decoration: none; background: url(../img/eba_header.png) -20px 2px no-repeat; } .ebaHeader h1.wsHeader { background: none; } .ebaHeader h1 a { display: block; padding: 1px 10px 0 150px; font: normal 20px/20px Arial, sans-serif; color: #444; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,1); } .ebaHeader h1.wsHeader a { padding-left: 10px; } /* App Bar Links List */ .ebaHeader ul { margin: 0; padding: 0; list-style: none; float: right; } .ebaHeader ul li { float: left; display: block; padding: 0; border-right: 1px solid rgba(0,0,0,0); -webkit-transition: border .2s linear; } .ebaHeader ul li:last-child { border-right: none; } .ebaHeader ul li span, .ebaHeader ul li a { padding: 0 6px 0 5px; color: #303030; color: rgba(0,0,0,.75); text-decoration: none; display: block; font: normal 11px/20px Arial, sans-serif; margin: 11px 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-transition: background-color .1s linear; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .ebaHeader ul li a:hover { background: rgba(0,0,0,.15); } .ebaHeader ul li a:active { background: -webkit-gradient(linear,0 0,0 100%, from(#BBB), to(#CCC)); background: -moz-linear-gradient(top, #BBB, #CCC); -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.25) inset; -moz-box-shadow: 0 2px 5px rgba(0,0,0,.25) inset; } /* Icon Links */ .ebaHeader ul li img { vertical-align: text-top; background-image: url(../img/eba_header.png); background-repeat: no-repeat; margin-right: 1px; width: 12px; height: 12px; border: none !important; } .ebaHeader ul li img.help { background-position: 0 0; } .ebaHeader ul li img.settings { background-position: 0 -12px; } .ebaHeader ul li img.cloud { background-position: 0 -24px; width: 18px; } .ebaHeader ul li img.mobile { background-position: -18px -24px; width: 12pxpx; } /* Logout Link */ .ebaHeader ul li span a.logout { display: inline-block; font: normal 11px/18px Arial, sans-serif; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin: 0 0 0 5px; border: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.05); padding: 0 6px; } .ebaHeader ul li span a.logout:hover { background: rgba(0,0,0,.15); } #header { padding: 0 !important; visibility: hidden; overflow: hidden; } #logo, #navbar { min-height: 0 !important; visibility: hidden; overflow: hidden; } #header a img { height: 0 !important; width: 0 !important; display: none; } /* =============== */ /* = Small Icons = */ /* =============== */ img.ebaFile { background-image: url(../img/eba_file_types.png); background-repeat: no-repeat; background-color: transparent; width: 16px; height: 16px; } img.ebaFile.generic {background-position:0 0;} img.ebaFile.excel {background-position:0 -16px;} img.ebaFile.pdf {background-position:0 -32px;} img.ebaFile.powerpoint {background-position:0 -48px;} img.ebaFile.word {background-position:0 -64px;} img.ebaFile.image {background-position:0 -80px;} img.wsIcon { background-image: url(../img/eba_icons_16.png); background-repeat: no-repeat; background-color: transparent; width: 16px; height: 16px; } img.wsIcon.note {background-position:0 0;} img.wsIcon.tag {background-position:0 -16px;} img.wsIcon.page {background-position:0 -32px;} img.wsIcon.navSection {background-position:0 -48px; width: 10px;} img.wsIcon.newSection {background-position:0 -64px;} img.wsIcon.editSection {background-position:0 -80px;} img.wsIcon.newPage {background-position:0 -96px;} img.wsIcon.editPage {background-position:0 -112px;} img.wsIcon.copyPage {background-position:0 -128px;} img.wsIcon.pageDir {background-position:0 -144px;} img.wsIcon.newDataGrid {background-position:-16px 0;} img.wsIcon.newReport {background-position:-16px -16px;} img.wsIcon.delete {background-position:-16px -32px;} img.wsIcon.edit {background-position:-16px -48px;} img.wsIcon.addRow {background-position: -16px -64px;} img.wsIcon.addFile {background-position: -16px -80px;} img.wsIcon.addLink {background-position: -16px -96px;} img.wsIcon.addNote {background-position: -16px -112px;} img.wsIcon.addTag {background-position: -16px -128px;} img.wsIcon.viewHistory {background-position: -16px -144px;} img.wsIcon.columnProperties {background-position:-32px 0;} img.wsIcon.listOfValues {background-position:-32px -16px;} img.wsIcon.columnGroups {background-position:-32px -32px;} img.wsIcon.validation {background-position:-32px -48px;} img.wsIcon.removeColumn {background-position: -32px -64px;} /* Language Selector */ div.languageSelector { font: normal 11px/16px Arial, sans-serif; margin: 8px 12px; color: #666; a { color: #333; text-decoration: underline; } b { font-weight: bold; } }