shared.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. /* -- Clear Fix -- */
  2. .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
  3. /* wrapper for all css */
  4. .ccs-shared {
  5. position: relative;
  6. font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
  7. font-size: 12px;
  8. }
  9. /* all links default styles */
  10. .ccs-shared a {
  11. color: #3e528c;
  12. text-decoration: none;
  13. cursor: pointer;
  14. outline: none;
  15. }
  16. .ccs-shared .jframe_ignore a {
  17. text-decoration: none;
  18. }
  19. .ccs-shared a.disabled {
  20. text-decoration: none;
  21. color: #000;
  22. }
  23. .ccs-shared ul.context-menu a.disabled {
  24. text-decoration: none;
  25. color: #999;
  26. cursor: pointer;
  27. }
  28. .ccs-shared a:hover {
  29. text-decoration: underline;
  30. }
  31. /* all imgs default styles */
  32. .ccs-shared img {
  33. border: 0px;
  34. }
  35. /* all paragraph default styles */
  36. .ccs-shared p {
  37. margin-bottom: 12px;
  38. }
  39. /* all input and form element default styles */
  40. .ccs-shared input, .ccs-shared textarea {
  41. padding: 2px;
  42. }
  43. .ccs-shared label {
  44. cursor: pointer;
  45. }
  46. .ccs-shared pre {
  47. font-family: monaco, courier;
  48. }
  49. /* errors */
  50. .ccs-error {
  51. color: #900;
  52. }
  53. /* all em default styles */
  54. .ccs-shared em, .ccs-shared i {
  55. font-style: italic;
  56. }
  57. /* all code default styles */
  58. .ccs-shared .ccs-code, .ccs-shared.ccs-code, .ccs-code {
  59. font-family: "Andale Mono", "Monaco", "Courier New" !important;
  60. }
  61. /* text is not selectable; good for double click actions like links to prevent the double click from selecting
  62. note that the user cannot select this text even if that's their intention; use sparingly */
  63. .ccs-no_select, .ccs-no_select * {
  64. user-select: none;
  65. -moz-user-select: none;
  66. -webkit-user-select: none;
  67. }
  68. /* OverText - input lables using OverText.js from MooTools More */
  69. .ccs-shared label.overTxtLabel {
  70. font-size: 11px;
  71. color: #999;
  72. margin-top: 3px;
  73. }
  74. .ccs-shared label.OverText-ArtInput {
  75. margin-top: 0px;
  76. }
  77. /* clear both sides of floats */
  78. .ccs-shared .ccs-clear {
  79. clear:both;
  80. }
  81. /* center text */
  82. .ccs-shared .ccs-center {
  83. text-align: center;
  84. }
  85. /* float left */
  86. .ccs-shared .ccs-left {
  87. float: left;
  88. }
  89. /* float right */
  90. .ccs-shared .ccs-right {
  91. float: right;
  92. }
  93. /* not displayed */
  94. .ccs-shared .ccs-hidden {
  95. display: none;
  96. }
  97. /* cursor pointer to connote clickability */
  98. .ccs-shared .ccs-pointer {
  99. cursor:pointer;
  100. }
  101. /* inline block display; makes elements block level, but follows page flow */
  102. .ccs-shared .ccs-inline, .ccs-shared ul.css-inline_list li {
  103. display:-moz-inline-box; /* FF2 */
  104. display:inline-block; /* webkit and FF3 */
  105. #zoom: 1; /* set hasLayout:true to mimic inline-block */
  106. #display:inline;
  107. border:0;
  108. padding:0;
  109. vertical-align:middle;
  110. #vertical-align: auto; /* makes TextBox,Button line up w/native counterparts on IE6 */
  111. position: relative;
  112. }
  113. /* down divot image */
  114. .ccs-shared .ccs-down_divot {
  115. width: 11px;
  116. height: 11px;
  117. display: block;
  118. background: url(../art/divots.png) -11px -11px no-repeat;
  119. }
  120. /* tabbed layout */
  121. /* .css-tabs, a ul; container for the tabs
  122. <ul class="tabs">
  123. <li><span>Tab 1</span></li>
  124. <li><span>Tab 2</span></li>
  125. <li><span>Tab 3</span></li>
  126. </ul>
  127. <ul class="tab_sections">
  128. <li> section for tab 1 </li>
  129. <li> section for tab 2 </li>
  130. <li> section for tab 3 </li>
  131. </ul>
  132. */
  133. .ccs-shared ul.tabs {
  134. margin: none;
  135. padding: none;
  136. }
  137. .ccs-shared .right_col pre {
  138. overflow: visible;
  139. }
  140. .ccs-shared .right_col ul.tab_sections {
  141. overflow: visible;
  142. }
  143. .ccs-shared ul.tab_sections {
  144. overflow: visible;
  145. }
  146. /* the tab elements, li elements */
  147. .ccs-shared .tabs li {
  148. cursor: pointer;
  149. height: 19px;
  150. line-height: 19px;
  151. background: url(/static/art/tabs.png);
  152. margin-right: 8px !important;
  153. color: #444;
  154. }
  155. /* each tab's text/html is wrapped in a span */
  156. .tabs li span {
  157. height: 18px;
  158. display: block;
  159. background: url(/static/art/tabs.png) right top;
  160. position: relative;
  161. left: 6px;
  162. padding: 1px 6px 0px 0px;
  163. }
  164. .ccs-shared .tabs > li {
  165. list-style: none;
  166. float: left;
  167. }
  168. .ccs-shared .tabs li.tabSelected {
  169. color: #000;
  170. background: url(/static/art/tabs.png) left 38px;
  171. }
  172. .ccs-shared .tabs li.tabSelected span {
  173. background: url(/static/art/tabs.png) right 38px;
  174. }
  175. .ccs-shared .tabs li:hover {
  176. color: #000;
  177. background: url(/static/art/tabs.png) left 19px;
  178. }
  179. .ccs-shared .tabs li:hover span {
  180. background: url(/static/art/tabs.png) right 19px;
  181. }
  182. /* stripy table */
  183. /*
  184. see: HtmlTable.js, HtmlTable.Zebra.js, HtmlTable.Select.js, HtmlTable.Sort.js in MooTools More
  185. <table data-filters="HtmlTable" class="selectable sortable" cellpadding="0" cellspacing="0">
  186. <thead>
  187. <tr>
  188. <th>Header for Column 1</th>
  189. <th>Header for Column 2</th>
  190. <th>Header for Column 3</th>
  191. </tr>
  192. </thead>
  193. <tbody>
  194. <tr><td> col 1 </td><td> col 2 </td><td> col 3 </td></tr>
  195. <tr><td> col 1 </td><td> col 2 </td><td> col 3 </td></tr>
  196. <tr><td> col 1 </td><td> col 2 </td><td> col 3 </td></tr>
  197. <tr><td> col 1 </td><td> col 2 </td><td> col 3 </td></tr>
  198. </tbody>
  199. </table>
  200. give it class "selectable" to allow the user to select rows
  201. give it class "sortable" to allow the user to sort the table
  202. */
  203. table[data-filters*=HtmlTable] {
  204. width: 100%;
  205. }
  206. table[data-filters*=HtmlTable] thead {
  207. background: url(/static/art/th_back.png);
  208. }
  209. table[data-filters*=HtmlTable] thead th {
  210. text-align: left;
  211. white-space: nowrap;
  212. padding: 0px 6px;
  213. border: 1px solid #b2b2b2;
  214. border-width: 0px 1px 1px 0px;
  215. height: 16px !important;
  216. line-height: 16px !important;
  217. font-size: 12px;
  218. font-weight: normal;
  219. overflow: hidden;
  220. }
  221. table[data-filters*=HtmlTable] th:last-child {
  222. border-right: none;
  223. }
  224. table[data-filters*=HtmlTable] td {
  225. white-space: nowrap;
  226. padding: 0px 8px;
  227. height: 20px;
  228. line-height: 20px;
  229. background: #fff;
  230. border: none;
  231. }
  232. table[data-filters*=HtmlTable] tr.table-tr-odd td {
  233. background: #f3f3f3;
  234. }
  235. table[data-filters*=HtmlTable] tr:nth-child(odd) td {
  236. background: #f3f3f3;
  237. }
  238. table[data-filters*=HtmlTable].selectable tr:hover > td, table[data-filters*=HtmlTable].selectable tr.table-tr-hovered td {
  239. background-color: #d4e7f8;
  240. color: #000;
  241. cursor: pointer;
  242. }
  243. table[data-filters*=HtmlTable] tr.selected td, table[data-filters*=HtmlTable] tr.table-tr-selected td, table[data-filters*=HtmlTable] tr.selected td a, table[data-filters*=HtmlTable] tr.table-tr-selected td a {
  244. background-color: #3875d7;
  245. color: #fff;
  246. }
  247. table.table-sortable th {
  248. cursor: pointer;
  249. }
  250. table.table-sortable th div {
  251. position: relative;
  252. padding-right: 10px;
  253. }
  254. span.table-th-sort-span {
  255. width: 7px;
  256. height: 16px;
  257. display: block;
  258. cursor: pointer;
  259. position: absolute;
  260. right: -2px;
  261. top: 0px;
  262. }
  263. .table-th-sort span.table-th-sort-span {
  264. background: url(/static/art/icons/bullet_arrow_down.png) -4px top no-repeat;
  265. }
  266. .table-th-sort-rev span.table-th-sort-span {
  267. background: url(/static/art/icons/bullet_arrow_up.png) -4px top no-repeat;
  268. }
  269. /* stickywin solid; this is the login window styles */
  270. div.solid-win div.body-left {
  271. background: url(../art/sticky-win-solid-back.png);
  272. width: 16px !important;
  273. overflow: visible;
  274. position: relative;
  275. z-index: 1;
  276. }
  277. div.solid-win div.body {
  278. position: relative;
  279. left: 16px;
  280. padding: 10px 16px 1px 0px;
  281. background: url(../art/sticky-win-solid-back.png) top right;
  282. }
  283. div.solid-win div.bottom {
  284. z-index: 0;
  285. background: url(../art/sticky-win-solid-back.png) bottom left;
  286. width: 16px !important;
  287. overflow: visible;
  288. position: relative;
  289. clear: both;
  290. }
  291. div.solid-win div.bottom_lr {
  292. position: relative;
  293. left: 16px;
  294. background: url(../art/sticky-win-solid-back.png) bottom right;
  295. height: 20px;
  296. padding-right: 16px;
  297. }
  298. /* JFrame styles */
  299. /* these are applied for you by default */
  300. div.jframe_wrapper {
  301. position: relative;
  302. height: 100%;
  303. }
  304. div.jframe_contents {
  305. min-height: 100%;
  306. }
  307. div.jframe_default h1, h2, h3, h4, h5 {
  308. padding: 0;
  309. margin: 0;
  310. margin-bottom: .3em;
  311. }
  312. /* put this on your root element (or any element you want to have a 10px padding)
  313. jframe content without this will be flush with the borders of the window */
  314. .jframe_padded {
  315. padding: 10px;
  316. }
  317. /* apply jframe_default class if you want to give your layout standard HTML-like layout
  318. good for documents for example. */
  319. div.jframe_default ul,
  320. div.jframe_default ol {
  321. padding-left: 1.5em;
  322. margin: 0;
  323. margin-bottom: 1em;
  324. }
  325. div.jframe_default ul li{
  326. list-style-type: disc;
  327. margin-bottom: 0.5em;
  328. }
  329. div.jframe_default a{
  330. font-weight: bold;
  331. }
  332. div.jframe_default code {
  333. font-family: fixed;
  334. }
  335. div.jframe_default table {
  336. border-collapse: separate;
  337. }
  338. div.jframe_default h1,
  339. div.jframe_default h2,
  340. div.jframe_default h3,
  341. div.jframe_default h4,
  342. div.jframe_default h5 { font-weight: bold; }
  343. div.jframe_default h1 { font-size: 150%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
  344. div.jframe_default h2 { font-size: 130%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
  345. div.jframe_default h3 { font-size: 120%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
  346. div.jframe_default h4 { font-size: 110%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
  347. div.jframe_default h5 { font-size: 105%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
  348. /* context menu */
  349. /*
  350. Create a UL element with the class context-menu (a ul with li items for each menu item). Put it inside the container you want to give a right click menu (like a div; for tables, put it inside a td - if you want the tr to have the right click behaviore, still put it in a td)
  351. Give the parent that has the right click control define the following in its data-context-menu-actions property:
  352. [ //array of actions; this allows support for more than one context menu in a single parent
  353. {
  354. 'events':['contextmenu','click:relay(.myapp-options)'], //when the user right clicks, or clicks a .myapp-options element
  355. 'menu':'ul.context-menu' //it shows this menu
  356. }
  357. ]
  358. Note that you can have more than one right click menu per container. This allows a table row to be right clicked and show a different menu if the user right clicks, say, an image vs a link or different td elements. See CCS.ContextMenu.js.
  359. */
  360. .ccs-shared ul.context-menu {
  361. border-radius: 2px;
  362. -moz-border-radius: 2px;
  363. -webkit-border-radius: 2px;
  364. background: #fff;
  365. border: solid #777;
  366. border-width: 1px;
  367. position: absolute;
  368. z-index: 1;
  369. display: none;
  370. overflow: visible;
  371. }
  372. .ccs-shared ul.context-menu * {
  373. white-space: nowrap;
  374. }
  375. .ccs-shared ul.context-menu li {
  376. border-bottom: 1px solid #ccc;
  377. padding: 3px;
  378. }
  379. .ccs-shared table[data-filters*=HtmlTable] tr.table-tr-selected td ul.context-menu li a {
  380. color: #000;
  381. background-color: #fff;
  382. text-decoration: none;
  383. }
  384. .ccs-shared .context-menu li:hover, .ccs-shared table[data-filters*=HtmlTable] tr.table-tr-selected td ul.context-menu li:hover a, .ccs-shared ul.context-menu li:hover a {
  385. text-decoration: none;
  386. background-color: #333;
  387. color: #fff;
  388. }
  389. .ccs-shared ul.context-menu li:last-child {
  390. border: none;
  391. }
  392. /* button bar */
  393. input[data-filters*=ArtButton] {
  394. padding: 0px 0px 0px 0px;
  395. /* webkit madness:
  396. put this padding statement in place and buttons are still padding 0/8/0/8px
  397. add the border: 0px statement below
  398. and they all go to 0/0/0/0px
  399. */
  400. border: 0px;
  401. vertical-align: bottom;
  402. }
  403. .ccs-shared [data-filters*=ArtButtonBar] a {
  404. float: left;
  405. height: 19px;
  406. }
  407. .ccs-shared [data-filters*=ArtButtonBar] li {
  408. margin-right: 0 !important;
  409. }
  410. /* side by side select */
  411. /*
  412. Takes a multi-select box and makes it so you can click to move elements from a selected list to a non-selected list.
  413. */
  414. .sideBySideSelect {
  415. user-select: none;
  416. -moz-user-select: none;
  417. -webkit-user-select: none;
  418. min-width:340px;
  419. }
  420. .sideBySideSelect div.deselected, .sideBySideSelect div.selected {
  421. border: 1px solid #333;
  422. float: left;
  423. width: 45%;
  424. height: 150px;
  425. background: #fff;
  426. overflow: auto;
  427. }
  428. .sideBySideSelect .spacer {
  429. padding-top: 50px;
  430. width: 30px;
  431. float: left;
  432. }
  433. .sideBySideSelect .spacer a {
  434. display: block;
  435. width: 16px;
  436. height: 16px;
  437. text-indent: -900px;
  438. margin: 5px auto;
  439. }
  440. .sideBySideSelect .spacer .moveRight {
  441. background: url(/static/art/led-icons/arrow_right.png) no-repeat;
  442. }
  443. .sideBySideSelect .spacer .moveLeft {
  444. background: url(/static/art/led-icons/arrow_left.png) no-repeat;
  445. }
  446. /* help text links */
  447. [data-filters*=HelpTip], [data-filters*=InfoTip] {
  448. display:-moz-inline-box; /* FF2 */
  449. display:inline-block; /* webkit and FF3 */
  450. #zoom: 1; /* set hasLayout:true to mimic inline-block */
  451. #display:inline;
  452. border:0;
  453. padding:0;
  454. vertical-align:middle;
  455. #vertical-align: auto; /* makes TextBox,Button line up w/native counterparts on IE6 */
  456. position: relative;
  457. width: 14px;
  458. height: 14px;
  459. background: url(/static/art/help.png);
  460. text-indent: -200px;
  461. overflow: hidden;
  462. }
  463. [data-filters*=InfoTip] {
  464. background: url(/static/art/info.png);
  465. }
  466. [data-filters*=ArtInput] {
  467. display: none;
  468. }
  469. [data-filters*=SizeTo] {
  470. overflow: auto;
  471. }
  472. .vertical .art-splitview-splitter {
  473. box-shadow: 0px -1px 3px #aaa;
  474. -webkit-box-shadow: 0px -1px 3px #aaa;
  475. -moz-box-shadow: 0px -1px 3px #aaa;
  476. }