shared.css 12 KB

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