shared.css 12 KB

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