/** * RevTK styles for ui/widgets * * This stylesheet should be in: * /css//widgets.css * * Images for themed widgets should go to: * /images//widgets/buttons.gif * /images//widgets/datafilter.gif * /images//widgets/... * * @see /lib/helper/WidgetsHelper * @see /apps/revtk/lib/helper/GadgetsHelper * * @package RevTK * @author Fabrice Denis */ /** * uiIBtn - Inline Block Buttons * * Example: * * * Button text * * * Example adding an icon on the EM element: * * * Delete * * */ .uiIBtn { display:-moz-inline-box; display:inline-block; padding:0 10px; /* no outline */ outline:none; -moz-user-select: none; -webkit-user-select: none; } .uiIBtn span { white-space:nowrap; } .uiIBtn, .uiIBtn:hover, .uiIBtn:hover span { text-decoration:none; } /* em is used for adding an icon (optional) */ .uiIBtn em { font-style:normal; } /* uiIBtn :: default green */ .uiIBtnDefault { border-radius:5px; /* default colour */ background:#6fa300; background: -webkit-linear-gradient(top, #6fa300 0%,#649300 100%); background: linear-gradient(to bottom, #6fa300 0%,#649300 100%); } .uiIBtnDefault { color:#fff; font:bold 15px/34px Arial, sans-serif; height:34px; text-shadow:0 -1px rgba(0,0,0,0.5); } .uiIBtnDefault:hover { box-shadow:0 1px 2px 1px rgba(0, 0, 0, 0.2); } /* uiIBtn :: additional colours */ .uiIBtnRed { background:#cb4b16; background: -webkit-linear-gradient(top, #cb4b16 0%,#b74314 100%); background: linear-gradient(to bottom, #cb4b16 0%,#b74314 100%); } .uiIBtnGreen { background:#6fa300; background: -webkit-linear-gradient(top, #6fa300 0%,#649300 100%); background: linear-gradient(to bottom, #6fa300 0%,#649300 100%); } /* uiIBtn :: default disabled (30px) */ .uiIBtnDisabled {} /* larger buttons for dialogs (for touch devices) */ .uiBMenuItem .uiIBtn { display:block; width:auto; text-align:center; } .uiBMenuItem .uiIBtn span { display:block; width:auto; } .uiBMenuItem .uiIBtnDefault { font-size:16px; line-height:41px; height:42px; } /* larger buttons for touch/mobile */ /** * uiBoxRounded * * Examples: * * ui_box_rounded('uiBoxCustom') * ...content... * end_ui_box() * * * => Outputs components/uiBoxRounded partial with class "uiBoxRounded uiBoxCustom" on table * * Rounded corner box using TABLE for flexible width and B tag to lock corner dimensions */ table.uiBoxRounded { width:100%; } table.uiBoxRounded td { padding:0; height:auto; } table.uiBoxRounded td b { background-repeat:no-repeat; display:block; width:6px; height:6px; } table.uiBoxRounded .t td, table.uiBoxRounded .b td { font-size:1px; line-height:1px; } table.uiBoxRounded .t .r b { background-position:-10px 0; } table.uiBoxRounded .b .l b { background-position:0 -10px; } table.uiBoxRounded .b .r b { background-position:-10px -10px; } table.uiBoxRounded .m td.c { width:100%; } /* RevTK default beige */ table.uiBoxRDefault td { background-color:#F1EFD6; } table.uiBoxRDefault td b { background-color:#FFFDE7; background-image:url(../../images/2.0/widgets/widgets-boxes.gif); } table.uiBoxRDefault .t .l b { background-position:0 0; } table.uiBoxRDefault .t .r b { background-position:-18px 0; } table.uiBoxRDefault .b .l b { background-position:0 -18px; } table.uiBoxRDefault .b .r b { background-position:-18px -18px; } table.uiBoxRDefault .m td.c { /* content padding */ padding:8px; } /* uiWindow default underlay (dark rounded borders) */ table.uiWindowUnderlay td { background-color:#000000; } table.uiWindowUnderlay td.l, table.uiWindowUnderlay td.r { background:none; } table.uiWindowUnderlay td b { background-image:url(../../images/2.0/widgets/widgets-windows.gif); width:8px; height:8px; } table.uiWindowUnderlay .t .l b { background-position:0 0; } table.uiWindowUnderlay .t .r b { background-position:-24px 0; } table.uiWindowUnderlay .b .l b { background-position:0 -24px; } table.uiWindowUnderlay .b .r b { background-position:-24px -24px; } table.uiWindowUnderlay .m td.c { height:100%; } /* uiWindow default underlay, selected (jQuery Draggable) .ui-draggable-dragging table.uiWindowUnderlay .t .l b { background-position:-32px 0; } .ui-draggable-dragging table.uiWindowUnderlay .t .r b { background-position:-52px 0; } .ui-draggable-dragging table.uiWindowUnderlay .b .l b { background-position:-32px -20px; } .ui-draggable-dragging table.uiWindowUnderlay .b .r b { background-position:-52px -20px; } */ /** * uiWindow * * Ie6: * In ie6 we use a conditional expression to grab the dimensions of the parent .uiWindow div. * See http://www.alistapart.com/articles/conflictingabsolutepositions */ .uiWindow { position:absolute; z-index:2; display:none; } .uiWindow .window-container { padding:8px; position:relative; left:0; top:0; z-index:1; } .uiWindow .window-top { height:20px; position:relative; width:100%; } .uiWindow .window-handle { width:100%; height:32px; background;blue; position:absolute; left:0; top:-8px; } .uiWindow .window-handle:hover { cursor:move; } .uiWindow .window-top .close { display:block; position:absolute; right:0px; top:-6px; width:24px; height:24px; background:url(../../images/2.0/widgets/widgets-windows.gif) no-repeat 0 -32px; } .uiWindow .window-top .close:hover { background-color:#aaa; } .uiWindow .window-body {} .uiWindow .underlay { position:absolute; bottom:0px; right:0px; left:0px; top:0px; } .uiWindow .underlay table { height:100%; } #ie .uiWindow { width:1px; } #ie .underlay { _width:expression(this.parentNode.offsetWidth); _height:expression(this.parentNode.offsetHeight-24); } /** * uiDataFilter (Apple.com style "ribbon") * * */ .uiDataFilter, .uiDataFilter .corner-left, .uiDataFilter .corner-right, .uiDataFilter h4, .uiDataFilter a, .uiDataFilter a span { background:url(../../images/2.0/widgets/widgets-datafilter.gif) repeat-x 0 0; } .uiDataFilter, .uiDataFilter h4, .uiDataFilter span, .uiDataFilter a { font:14px/28px Arial, sans-serif; } .uiDataFilter { width:100%; margin:0 0 5px; } .uiDataFilter .corner-left { float:left; width:16px; height:29px; background-position:0 -40px; } .uiDataFilter .corner-right { float:right; width:16px; height:29px; background-position:100% -40px; } .uiDataFilter h4 { color:#7D7D7D; float:left; padding:0 16px 0 0; margin:0; background-position:100% -120px; } .uiDataFilter ul { float:left; list-style:none; padding:0; margin:0; } .uiDataFilter li { float:left; list-style:none; margin:0; padding:0; } .uiDataFilter li a { float:left; padding:0 0 0 10px; height:29px; color:#5C5C5C; text-decoration:none; background-position:0 -120px; } .uiDataFilter li a span { float:left; padding-right:10px; background-position:100% -120px; } .uiDataFilter li a:hover { color:#000; } .uiDataFilter li.active a { background-position:0 -80px;; color:#000; } .uiDataFilter li.active a span { background-position:100% -80px; } /** * uiTabs - base styles to use with ui_tabs() helper. * * Simple tabs with enough markup to style image corners, and a hover state * also in IE6 (a:hover span {...}). * */ .uiTabs {} .uiTabs ul { float:left; width:100%; background:url("../../images/1.0/tabs/bg.gif") repeat-x 0 100%; margin:0; padding:0 0; font-size:12px; line-height:1em; } .uiTabs li { float:left; display:inline; margin:0 7px 0 0; border:1px solid #ccc; border-bottom:none; } .uiTabs li a { float:left; padding:0 0 0 12px; background:#ccc; color:#444; font:bold 14px/1.1em Arial, sans-serif; text-decoration:none; outline: none; } .uiTabs li span { float:left; padding:7px 12px 6px 0; } .uiTabs a:hover, .uiTabs a:hover span { background:#fff; color:#000; text-decoration:underline; } .uiTabs .active a { background:#fff; color:#000; } /** * uiTabbedView - base styles. * */ .uiTabbedBody { border:1px solid #ccc; padding:10px; border-top:none; background:#fff; } /** * uiChartVs * * Set the class to a container without padding (create a nested div if needed). * */ .uiChartVs { width:100%; height:85px; overflow:visible; position:relative; } .uiChartVs .shadow { position:absolute; width:100%; left:5px; bottom:0; height:56px; background:#C1BEA3; } .uiChartVs p { width:50%; margin:0; padding:0; } .uiChartVs p .ttl { display:block; font:bold italic 14px/1em Georgia, serif; color:#4B4B4B; } .uiChartVs p .zero { color:#979797; } /* gray out title */ .uiChartVs em { font-weight:normal; font-style:normal; } .uiChartVs p.left { float:left; } .uiChartVs p.right{ float:right; text-align:right; } .uiChartVs .pct { position:absolute; bottom:5px; height:50px; border-bottom:8px solid #fff; -moz-box-shadow:0 2px 5px rgba(0,0,0,0.3); -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.3); } .uiChartVs a.pct { text-decoration:none; } .uiChartVs .left .pct { left:0; background:#b1fe66; border-bottom-color:#82ba4b; } .uiChartVs .right .pct { right:0; background:#dd5d3a; border-bottom-color:#a2442b; } .uiChartVs .pct span { position:absolute; top:10px; font:27px/1em Georgia, serif; color:#000; text-shadow:0 1px rgba(255,255,255,0.4); } .uiChartVs .left .pct span { left:10px; } .uiChartVs .right .pct span { right:10px; } .uiChartVs .pct span em { font-size:17px; } /** * uiPager * */ ul.uiPager { margin:0; padding:0; float:right; padding-left:14px; background:url(../../images/ui/icons/ico-pager.gif) no-repeat 0 55%; } ul.uiPager li { float:left; list-style:none; background:none; border-right:1px solid #E3E0C9; font:11px/1.1em Arial; padding:0; margin:0; } ul.uiPager li.active { background:none; font-weight:bold; padding:4px 8px; color:#000; } ul.uiPager li.disabled { background:none; font-weight:bold; padding:4px 8px; color:#888888; } ul.uiPager li.etc { background:none; padding:4px 8px; color:#888888; } ul.uiPager li a { padding:4px 8px; float:left; } ul.uiPager li a:hover { background:#E3E0C9; color:#005CB1; text-decoration:underline; } ul.uiPager li.next { border:0; } ul.uiPager li.prev a, ul.uiPager li.next a { font-weight:bold; } /** * uiTable */ .uiTable { margin:0 0 0.5em; } .uiTabular { border:1px solid #BDBCAA; border-top:1px solid #D9D8CE; width:100%; } /* thead */ .uiTabular th { padding:0; font:13px Arial, sans-serif; color:#5C5B52; border-bottom:1px solid #A1A1A1; text-align:left; background:#D9D6B7 url(../../images/2.0/widgets/widgets-selecttable.gif) repeat-x 0 0; } .uiTabular th a, .uiTabular th span.hd { display:block; float:left; padding:6px 10px; text-align:left; text-decoration:none; } /* non-sortable */ .uiTabular th a { color:#005CB1; } .uiTabular th a:hover { text-decoration:underline; color:#005CB1; padding-right:12px; background-color:#fff; } .uiTabular th a.active { color:#000; } /* sort icon */ .uiTabular th a.sort { padding-right:12px; } .uiTabular th a.sort:hover { background:url(../../images/2.0/widgets/widgets-selecttable.gif) no-repeat 100% 50%; } .uiTabular th a.sortasc { padding-right:12px; background:url(../../images/2.0/widgets/widgets-selecttable.gif) no-repeat 100% -37px; } .uiTabular th a.sortdesc { padding-right:12px; background:url(../../images/2.0/widgets/widgets-selecttable.gif) no-repeat 100% -72px; } /* tbody */ .uiTabular td { padding:8px 10px; color:#666; font:13px/1.1em Arial, sans-serif; border-bottom:1px solid #E8E5CA; } .uiTabular tbody td { background-color:#FCFAEB; } .uiTabular tr.odd td { background-color:#fff; } /* uiTable hover */ .uiTabular tbody tr.hover { background-color:#fff; } /* default alignments and colors */ .uiTabular tbody td { color:#5C5B52; text-align:left; } .uiTabular tbody var { color:#000; font-size:13px; } /* errors */ .uiTabular tbody td.error { background-color:#FBCFCF; } /* CELL STYLES */ table.uiTabular td.dark { color:#000; } table.uiTabular td.bold { font-weight:bold; } table.uiTabular td.center { text-align:center; } table.uiTabular td.right { text-align:right; } table.uiTabular td.editlink { text-align:center; } table.uiTabular td.editlink a { color:#21C635; } table.uiTabular td.red { color:#C82222; } /* failed reviews */ table.uiTabular td.compound { color:#000; padding-top:0; padding-bottom:0; } table.uiTabular td.nowrap { white-space:nowrap; } table.uiTabular td.kanji { text-align:center; font-size:24px; line-height:1em; color:#000; padding-top:4px; paddinb-bottom:4px; } table.uiTabular td.keyword { text-align:left; font:15px/1em Georgia, serif; white-space:nowrap; } /** * uiProgressBar * * Reference markup: * * *
*
* 30 of 50 * 5 of 50 *
*
* * * @see dev/index (internal uri) * @see GadgetsHelper */ .uiProgressBar { margin:0 1px; padding:1px 0; background:#A1A1A1; } .uiProgressBar div { position:relative; height:19px; margin:0 -1px; border-left:1px solid #A1A1A1; border-right:1px solid #A1A1A1; } .uiProgressBar span { position:absolute; left:0; top:0; text-indent:-5000px; font-size:1px; line-height:1px; display:block; width:100%; height:100%; } .uiProgressBar div, .uiProgressBar span { background:#5A5A5A url(../../images/2.0/widgets/gadgets-progressbar.gif) repeat-x 0 0; } .uiProgressBar span.g /*green*/ { background-color:#72A311; background-position:0 -32px; } .uiProgressBar span.r /*red*/ { background-color:#A32011; background-position:0 -64px; }