/* CSS */ /** * (CSS) Swami Admin Elements * * For Swami admin and embedding Swami admin elements into a public page * ie; should not effect page layout or any other elements * * @package Swami * @subpackage assets * @version 0.5.0 * @link http://swami.curiousanimal.com/ * @author Nick Gregory [Swami@curiousanimal.com] * * @copyright (c) 2008 Nick Gregory * @license http://creativecommons.org/licenses/by-nd/3.0 * **/ /* see '_assets/_swami/test.html' font: font-style font-weight font-size/line-height font-family font: italic bold 1.2em/1.1em serif; Colour Reference; #444 - footer-bg #aaa - borders */ /* GENERAL ELEMENTS ------------------------------------------------------------------ */ /* usually apply a 24px background-image:urel(_swami/icons/22/x.png) */ h3.sw_admin_title {height:24px; margin:10px 0; padding-left:30px; background-position:0 0; background-repeat:no-repeat; font-weight:bold;} h3.sw_admin_title select {width:160px; border:solid 1px #ccc; height:20px; line-height:14px; font-size:14px; font-weight:bold;} h3.sw_admin_title select option {margin-left:20px; padding:0 24px; background-position:2px 50%; background-repeat:no-repeat;} /* from http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html for button tags http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/ http://particletree.com/features/rediscovering-the-button-element/ note padding-right:12px; = sliding doors padding background = 18 x 24 span background = 300 x 24 :hover span padding:6px 0 4px 12px; to push text down 1px; */ a.sw_button { display:block; float:left; height:24px; margin-right:6px; padding-right:12px; background:transparent url(ui/bg_button.png) no-repeat scroll top right; color:#444; font:bold 12px/12px "Arial",sans-serif; text-decoration:none; cursor:pointer; } a.sw_button span {display:block; padding:5px 0 5px 12px; background:transparent url(ui/bg_button_span.png) no-repeat; line-height:14px;} a.sw_button span img {width:12px; height:12px;} a.sw_button:hover {background-position:right -24px; color:#000; outline:none;} a.sw_button:hover span {background-position:left -24px;} a.sw_button.active, a.sw_button:active {background-position:right -48px; color:#000; outline:none;} a.sw_button.active span, a.sw_button:active span {background-position:left -48px;} /** @todo - redo button.sw_button as ? **/ /* button.sw_button span {margin-top:-2px;} /* firefox */ /* Styling the Button Element with CSS Sliding Doors */ button.sw_button {position:relative; border:0; padding:0; cursor:pointer; overflow:visible;} /* overflow removes extra side padding in IE */ button.sw_button {margin-right:5px; padding:0 8px 0 0; background:transparent url(ui/bg_button.png) no-repeat right 1px; text-align:center;} /* 5 + 19 = image height (24) */ button.sw_button span {position:relative; display:block; white-space:nowrap;} button.sw_button span {height:19px; padding:5px 0 0 12px; background:transparent url(ui/bg_button_span.png) no-repeat left top; font: bold 14px/14px sans-serif;} /* the redundant class is used to apply the hover state with a script */ button.sw_button:hover, button.sw_button_hover {background-position:right -23px;} button.sw_button:hover span, button.sw_button_hover span {background-position:left -24px;} button.sw_button:active, button.sw_button_active {background-position:right -47px;} button.sw_button:active span, button.sw_button_active span {background-position:left -48px;} /* overrides extra padding in Firefox */ button.sw_button:-moz-focus-inner {border:none;} /* Safari and Google Chrome only - fix margins */ @media screen and (-webkit-min-device-pixel-ratio:0) { button.sw_button:hover, button.sw_button_hover {background-position:right -23px;} button.sw_button:active, button.sw_button_active {background-position:right -47px;} } /* TABS ------------------------------------------------------------------ */ /* from http://reference.sitepoint.com/css/display - for 'display:inline-block;' IE requires another 'display:inline;' - if ul.sw_tabs li {display:block; float:left;} then requires ul clearfix but works in IE */ ul.sw_tabs {margin:10px 0 -1px 0;} ul.sw_tabs li { display:inline-block; height:16px; margin-right:4px; padding:1px 10px; border:solid 1px #aaa; list-style:none; background-color:#ccc; background-repeat:no-repeat; background-position:2px; color:#444; line-height:16px; font-size:12px; font-weight:bold; cursor:pointer; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; } ul.sw_tabs li:hover {background-color:#ffc;} ul.sw_tabs li.sw_tab_active {background-color:#f3f3f3; border-bottom:0; padding-bottom:2px;} /* special tabs */ ul.sw_tabs li.tab_help span, ul.sw_tabs li.tab_rels span, ul.sw_tabs li.tab_search span, ul.sw_tabs li.tab_design span, ul.sw_tabs li.tab_tools span {padding-left:12px;} ul.sw_tabs li.tab_help {background-image:url(icons/16/help-browser.png);} ul.sw_tabs li.tab_rels {background-image:url(icons/misc/fam.sitemap_color.png);} ul.sw_tabs li.tab_search {background-image:url(icons/16/system-search.png);} ul.sw_tabs li.tab_design {background-image:url(icons/16/document-properties.png);} ul.sw_tabs li.tab_tools {background-image:url(icons/16/preferences-system.png);} /* TAB - WRAPPER ------------------------------------------------------------------ */ div.sw_tab_wrap { min-height:128px; padding:10px; border:solid 1px #aaa; background:#f3f3f3; -moz-border-radius-topright:3px; -webkit-border-top-right-radius:3px; } /** @todo - div.sw_tab_wrap.hide {height:0px;} for collapsable tabs **/ /** @todo - rename to sw_tab_statusbar find infobar - a class for js (sw-moo-admin.js) **/ div.sw_tab_info { height:16px; margin:0 0 10px 0; padding:3px 4px; background:#aaa; color:#fff; font-size:12px; line-height:16px; -moz-border-radius:0 0 3px 3px; -webkit-border-bottom-left-radius:3px; -webkit-border-bottom-right-radius:3px; } div.sw_tab_info img {float:left; padding:0 4px;} div.sw_tab_opts {margin:4px; text-align:right;} div.sw_tab_opts button {padding:2px 10px;} /* TAB - CONTENTS ------------------------------------------------------------------ */ /** .sw_tab_con_in = these are auto assigned an id, hidden/revealed @todo - min-height:128px; collapses margin in IE - required? div.sw_tab_con_in {margin:0px;} **/ /* ADMIN ICONS ------------------------------------------------------------------ */ ul.sw_icons {list-style:none;} ul.sw_icons li { float:left; background-color:#ddd; background-position:2px 2px; background-repeat:no-repeat; border:solid 1px #aaa; -moz-border-radius:3px; -webkit-border-radius:3px; } ul.sw_icons li:hover {background-color:#ffc;} ul.sw_icons li a {display:block; /*line-height:20px;*/ text-decoration: none;} /* function icons (sw_tab_wrap width = container(950) - 10 - 10 - 1 - 1 = 928) */ ul.sw_icons li.sw_icon_func {width:73px; height:73px; margin:0 10px 10px 0; text-align:center} ul.sw_icons li.sw_icon_func a {padding-top:4px;} /* data icons + sub-menu */ ul.sw_icons li.sw_icon_data {width:175px; margin:0 10px 10px 0;} ul.sw_icons li.sw_icon_data a {padding-left:30px;} li.sw_icon_data ul.sw_icon_submenu {visibility:hidden; margin:0; /* bottom margin 0 float not cleared */ } li.sw_icon_data:hover ul.sw_icon_submenu {visibility:visible;} li.sw_icon_act, li.sw_icon_data ul.sw_icon_submenu li {line-height:12px; font-size:10px;} li.sw_icon_act {margin:1px 0; width:50px; text-align:center;} li.sw_icon_data ul.sw_icon_submenu li {margin:8px 0 2px 2px;} li.sw_icon_data ul.sw_icon_submenu li a {padding:0 4px;} /* action icons */ a.sw_act_edit, li.sw_icon_act a {background-position:2px 50%; background-repeat:no-repeat;} li.sw_icon_act a {background-color:#ccc;} /*.sw_icon_act a.edit {background-image:url(icons/misc/8-em-pencil.png); padding-left:14px;} */ li.sw_icon_act a.delete {background-image:url(icons/misc/8-em-cross.png); padding-left:14px;} li.sw_icon_act a.view {background-image:url(icons/misc/8-em-heart.png); padding-left:14px;} li.sw_icon_act a.delete:hover {background-color:#c30; color:#fff;} a.sw_act_update, a.sw_act_edit {display:block; background-color:#ffffce; -moz-border-radius:3px; -webkit-border-radius:3px;} a.sw_act_edit {background-image:url(icons/misc/8-em-pencil.png); padding-left:14px;} tr ul.sw_icons {visibility:hidden;} tr:hover ul.sw_icons {visibility:visible;} /* DATA LIST ------------------------------------------------------------------ */ table.sw_list {width:100%; border:solid 1px #aaa; -moz-border-radius:3px; -webkit-border-radius:3px;} table.sw_list tr {background:#fff;} table.sw_list tr:hover {background:#eeb;} table.sw_list th {padding:0 10px; background:#eed;} table.sw_list thead th {border-bottom:solid 1px #ccc;} table.sw_list td {padding:4px 10px; vertical-align:top; border-bottom:solid 1px #ccc;} table.sw_list td a:hover {text-decoration:underline;} table.sw_list td.sw_col_chk {width:52px; padding:2px 4px; border-right:dashed 1px #ddd;} /* width det. by sw_icon_act */ table.sw_list td.sw_col_chk input {margin:0;} /* DATA EDIT ------------------------------------------------------------------ */ .sw_toolbar {position:relative; margin:0 0 10px 0; padding:4px; background:#aaa; border: solid 1px #666;} .sw_toolbar {-moz-border-radius:3px; -webkit-border-radius:3px;} /*.sw_toolbar button {float:left;}*/ /*.sw_toolbar select {border:solid 1px #999; float:left;}*/ /* form */ ul.sw_form_edit {list-style:none; margin:0;} ul.sw_form_edit li {margin:0 0 4px 0;} ul.sw_form_edit li label {float:left; min-width:120px; margin-right:10px; vertical-align:top;} /* TO CLEANUP ------------------------------------------------------------------ */ .pf_text, .pf_date, .pf_datetime, .pf_title, .pf_textarea, .pf_textarea-title {border:solid 1px #aaa;} /* .pf_date {background-image:url(icons/16/office-calendar.png); background-position:100% 50%; background-repeat:no-repeat;} */ .pf_date {float:left;} .pf_title, .pf_textarea-title {font-size:18px;} .pf_text:focus, .pf_date:focus, .pf_datetime:focus, .pf_title:focus, .pf_textarea:focus {border-color:#999; background-color:#ffe;} .pf_title {margin-bottom:10px;} .pf_title, .pf_textarea {width:100%;} .sw_reveal {background:#ddd;} .sw_reveal {width:12px; height:12px; -moz-border-radius:3px; -webkit-border-radius:3px; border:solid 1px #999; padding:1px; margin-right:10px; background-color:#ccc; background-position:50% 50%; background-repeat:no-repeat;} .sw_reveal {background-image:url(icons/misc/12-em-down.png);} /* modifiying classes ie; on elements */ /* FILES ------------------------------------------------------------------ */ /* images */ .sw_thumb {float:left; width:116px; height:140px; margin:10px 10px 0 0; border:solid 1px #ab5; background:#ccc; color:#333; text-align:center;} #sw_preview {visibility:hidden; position:absolute; top:32px; right:32px; padding:0 4px; padding-bottom:0; border:solid 2px #222; background:#ccc; z-index:99;} #sw_preview {-moz-border-radius:6px; -webkit-border-radius:6px;} #sw_preview img {border:solid 1px #222;} #sw_upload_status {visibility:hidden; opacity:0; -moz-opacity:0; position:absolute; background:#eee; top:20px; right:20px; border:solid 1px #aaa; padding:10px; z-index:99;} #mmsg {margin-left:10px; padding-left:7px; background:url(ui/msg_arrow.gif) left center no-repeat; overflow:hidden;} #mmsg div {min-width:150px; max-width:250px; padding:5px;border:2px solid #924949; border-left:none; background:#f3e6e6;} /* duplicated */ /* in helpers.css */ .hide {display:none;} /* not in grid.css */ .column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 { overflow:hidden; } /* skins * ul.sw_tabs {margin:4px 0 0 0; background:#069; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px;} ul.sw_tabs li {margin:3px 0 3px 3px; -moz-border-radius:3px; -webkit-border-radius:3px;} div.sw_tab_wrap {border-color:#069; -moz-border-radius:0; -webkit-border-radius:0; border-width: 0 1px;} div.sw_tab_info {background-color:#069;} /**/