PageRenderTime 41ms CodeModel.GetById 19ms RepoModel.GetById 0ms app.codeStats 0ms

/jsonwebservice/src_client_yui/com/jaxws/json/yui/doc/provider/inputex/css/inputEx.css

http://jsonwebservice.googlecode.com/
CSS | 712 lines | 484 code | 135 blank | 93 comment | 0 complexity | b94fe5dfaf6239ca42c94ae5c26cfa23 MD5 | raw file
  1. /**
  2. * inputEx.Field
  3. */
  4. div.inputEx-fieldWrapper {
  5. margin-bottom:0.2em;
  6. }
  7. div.inputEx-label {
  8. float: left;
  9. color: #505050;
  10. text-align: right;
  11. padding: 0.2em 0.5em 0 0;
  12. }
  13. div.inputEx-Group div.inputEx-label {
  14. width: 130px;
  15. }
  16. div.inputEx-Field {
  17. float: left;
  18. }
  19. div.inputEx-description {
  20. clear:both;
  21. color: #505050;
  22. font-size: 75%;
  23. margin-top: 2px;
  24. }
  25. div.inputEx-message {
  26. float: left;
  27. margin: 4px;
  28. font-size: 85%;
  29. }
  30. div.inputEx-clear-div {
  31. clear: both;
  32. }
  33. /**
  34. * VALID, INVALID, EMPTY states (and focused)
  35. */
  36. div.inputEx-invalid > div.inputEx-message {
  37. color:#C00E0C;
  38. font-weight:bold;
  39. }
  40. div.inputEx-invalid > div.inputEx-label {
  41. color:#C00E0C;
  42. font-weight:bold;
  43. }
  44. div.inputEx-invalid > div.inputEx-label label {
  45. background:transparent url(?CLIENT_RESOURCE=inputex/images/error_bang.gif) no-repeat scroll 0 1px;
  46. padding-left:20px;
  47. }
  48. div.inputEx-valid > div.inputEx-message {
  49. color:#505050;
  50. font-weight: normal;
  51. }
  52. div.inputEx-valid > div.inputEx-label {
  53. color:#505050;
  54. font-weight:normal;
  55. }
  56. /* Properties set by an invalid higher hierarchy field are disabled for valid or empty subfields */
  57. div.inputEx-valid > div.inputEx-label label,
  58. div.inputEx-empty > div.inputEx-label label {
  59. background: none;
  60. padding-left: inherit;
  61. font-weight:normal;
  62. color: #505050;
  63. }
  64. div.inputEx-typeInvite > div.inputEx-Field input, div.inputEx-typeInvite > div.inputEx-Field textarea {
  65. color: #aaa;
  66. }
  67. div.inputEx-empty div.inputEx-valid div.inputEx-Field input, div.inputEx-empty div.inputEx-valid div.inputEx-Field textarea {
  68. color: black;
  69. }
  70. /**
  71. * inputEx.StringField
  72. */
  73. div.inputEx-StringField-wrapper {
  74. float: none;
  75. }
  76. /**
  77. * inputEx.Group
  78. */
  79. legend.inputEx-Group-legend {
  80. color:#63126B;
  81. font-weight: bold;
  82. }
  83. div.inputEx-Group div.inputEx-Group-collapseImg {
  84. width: 14px;
  85. height: 14px;
  86. background-image: url(?CLIENT_RESOURCE=inputex/images/sprite-menu.gif);
  87. background-color: transparent;
  88. background-repeat: no-repeat;
  89. background-attachment: scroll;
  90. float: left;
  91. }
  92. div.inputEx-Group fieldset.inputEx-Expanded legend ,
  93. div.inputEx-Group fieldset.inputEx-Collapsed legend {
  94. cursor: pointer;
  95. }
  96. div.inputEx-Group fieldset.inputEx-Expanded legend div.inputEx-Group-collapseImg {
  97. background-position: -8px 2px;
  98. }
  99. div.inputEx-Group fieldset.inputEx-Expanded legend:hover div.inputEx-Group-collapseImg {
  100. background-position: -8px -78px;
  101. }
  102. div.inputEx-Group fieldset.inputEx-Collapsed legend div.inputEx-Group-collapseImg {
  103. background-position: -8px -317px;
  104. }
  105. div.inputEx-Group fieldset.inputEx-Collapsed legend:hover div.inputEx-Group-collapseImg {
  106. background-position: -8px -397px;
  107. }
  108. div.inputEx-Group fieldset.inputEx-Collapsed div.inputEx-fieldWrapper {
  109. display: none;
  110. }
  111. /**
  112. * inputEx.Form
  113. */
  114. div.inputEx-Form-buttonBar {
  115. margin: 3px 0 0 137px;
  116. }
  117. .inputEx-Button { margin:0 4px 0 0; }
  118. div.inputEx-Form-Mask {
  119. height:275px;
  120. left:0pt;
  121. position:absolute;
  122. top:0pt;
  123. width:180px;
  124. }
  125. div.inputEx-Form-Mask div.inputEx-Form-Mask-bg {
  126. background-color:#FFFFFF;
  127. height:100%;
  128. left:0pt;
  129. opacity:0.9;
  130. position:absolute;
  131. top:0pt;
  132. width:100%;
  133. }
  134. div.inputEx-Form-Mask div.inputEx-Form-Mask-spinner {
  135. width: 36px;
  136. height: 36px;
  137. background-image: url(?CLIENT_RESOURCE=inputex/images/spinner.gif);
  138. }
  139. div.inputEx-Form-Mask span {
  140. color:#666666;
  141. }
  142. /**
  143. * UrlField
  144. */
  145. /* position relative to position:absolute favicon inside */
  146. div.inputEx-UrlField {position:relative;}
  147. div.inputEx-UrlField input { padding-left: 20px; }
  148. div.inputEx-UrlField input.nofavicon {
  149. padding-left: 0px;
  150. }
  151. div.inputEx-UrlField img {
  152. position: absolute;
  153. top: 3px;
  154. left: 2px;
  155. width: 16px;
  156. height: 16px;
  157. }
  158. /**
  159. * inputEx-ListField
  160. */
  161. /* Buttons */
  162. img.inputEx-ListField-addButton {
  163. background: transparent url(?CLIENT_RESOURCE=inputex/images/add.png) no-repeat scroll 0%;
  164. width: 16px;
  165. height: 16px;
  166. cursor: pointer;
  167. }
  168. img.inputEx-ListField-delButton {
  169. background: transparent url(?CLIENT_RESOURCE=inputex/images/delete.png) no-repeat scroll 0%;
  170. width: 16px;
  171. height: 16px;
  172. float: left;
  173. cursor: pointer;
  174. }
  175. /* Arrows */
  176. div.inputEx-ListField-Arrow {
  177. width: 16px;
  178. height: 16px;
  179. float: left;
  180. cursor: pointer;
  181. }
  182. div.inputEx-ListField-ArrowUp {
  183. background: transparent url(?CLIENT_RESOURCE=inputex/images/bullet_arrow_up.png) no-repeat scroll 0%;
  184. }
  185. div.inputEx-ListField-ArrowDown {
  186. background: transparent url(?CLIENT_RESOURCE=inputex/images/bullet_arrow_down.png) no-repeat scroll 0%;
  187. }
  188. div.inputEx-ListField-subFieldEl {
  189. float:left;
  190. margin-left:4px;
  191. }
  192. a.inputEx-List-link {
  193. color: blue;
  194. cursor: pointer;
  195. margin-left: 10px;
  196. }
  197. a.inputEx-List-link:hover {
  198. text-decoration: underline;
  199. }
  200. /**
  201. * inputEx.InPlaceEdit
  202. */
  203. div.inputEx-InPlaceEdit-visu { cursor: pointer; padding: 3px; }
  204. .inputEx-InPlaceEdit-editor .inputEx-InPlaceEdit-editorDiv {
  205. float: left;
  206. margin-bottom:0; /* remove 0.2em bottom margin because no need to cumulate field and editor-field margins */
  207. }
  208. .inputEx-InPlaceEdit-OkButton { margin-left: 5px; }
  209. /**
  210. * inputEx.AutoComplete
  211. */
  212. .yui-skin-sam div.inputEx-AutoComplete .yui-ac-input {
  213. width: auto;
  214. position: relative;
  215. }
  216. .yui-skin-sam div.inputEx-AutoComplete .yui-ac-content {
  217. width: auto;
  218. }
  219. div.inputEx-AutoComplete div.yui-ac-container {
  220. margin-bottom:2em;
  221. width:25em;
  222. }
  223. /**
  224. * DateField
  225. */
  226. div.inputEx-DateField {
  227. background: transparent url(?CLIENT_RESOURCE=inputex/images/calendar.gif) no-repeat scroll left center;
  228. padding-left: 20px;
  229. }
  230. div.inputEx-DateField input {
  231. width: 75px;
  232. }
  233. /**
  234. * Picker fields
  235. */
  236. div.inputEx-PickerField, div.inputEx-PickerField input {
  237. vertical-align: top;
  238. }
  239. div.inputEx-PickerField {
  240. background: none;
  241. padding-left: 0;
  242. }
  243. div.inputEx-PickerField .yui-menu-button button {
  244. background-position: center center;
  245. background-repeat: no-repeat;
  246. padding:0;
  247. width:20px;
  248. height:18px;
  249. min-height:0; /* reset "min-height:2em" that prevented "height:18px" to be applied */
  250. }
  251. div.inputEx-PickerField .yui-overlay {
  252. -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2), -2px 2px 4px rgba(0, 0, 0, 0.2);
  253. -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2), -2px 2px 4px rgba(0, 0, 0, 0.2);
  254. }
  255. /*
  256. * Date Picker
  257. */
  258. div.inputEx-DatePickerField .yui-menu-button button {
  259. background-image: url(?CLIENT_RESOURCE=inputex/images/calendar.gif);
  260. }
  261. /**
  262. * Color Field
  263. */
  264. div.inputEx-ColorField div.yui-overlay div.bd {
  265. background:white no-repeat scroll 5px 5px;
  266. border:1px solid #AAAAAA;
  267. }
  268. div.inputEx-ColorField .yui-menu-button button {
  269. background-image: url(?CLIENT_RESOURCE=inputex/images/palette.png);
  270. }
  271. div.inputEx-ColorField-button {
  272. height: 19px;
  273. width: 100px;
  274. border: 1px solid #B5B8C8;
  275. margin-left: 0px;
  276. cursor: pointer;
  277. float:left; /* to display color picker icon on the right */
  278. }
  279. .inputEx-ColorField-square {
  280. float:left;
  281. cursor: pointer;
  282. width:15px;
  283. height:15px;
  284. margin:2px;
  285. }
  286. .inputEx-ColorField-square.selected {
  287. width:13px;
  288. height:13px;
  289. border-width:1px;
  290. border-style:solid;
  291. border-color:#666666;
  292. border-color:rgba(0,0,0,0.5);
  293. }
  294. .inputEx-ColorField-square:hover {
  295. width:13px;
  296. height:13px;
  297. border-width:1px;
  298. border-style:solid;
  299. border-color:#666666;
  300. border-color:rgba(0,0,0,0.5);
  301. }
  302. .inputEx-ColorField-Grid { padding:5px; }
  303. /**
  304. * ColorPicker Field (YUI ColorPicker)
  305. */
  306. .inputEx-ColorPicker-Button { vertical-align: baseline; }
  307. .inputEx-ColorPicker-Button button {
  308. outline: none; /* Safari */
  309. line-height: 1.5;
  310. }
  311. /* Style the Button instance's label as a square whose background color
  312. represents the current value of the ColorPicker instance. */
  313. .inputEx-ColorPicker-Label {
  314. display: block;
  315. display: inline-block;
  316. *display: block; /* For IE */
  317. *margin: .25em 0; /* For IE */
  318. width: 1em;
  319. height: 1em;
  320. overflow: hidden;
  321. text-indent: 1em;
  322. background-color: #fff;
  323. white-space: nowrap;
  324. border: solid 1px #000;
  325. }
  326. /* Hide default colors for the ColorPicker instance. */
  327. .inputEx-ColorPicker-Container-nocontrols .yui-picker-controls,
  328. .inputEx-ColorPicker-Container-nocontrols .yui-picker-swatch,
  329. .inputEx-ColorPicker-Container-nocontrols .yui-picker-websafe-swatch {
  330. display: none;
  331. }
  332. /* Size the body element of the Menu instance to match the dimensions of the ColorPicker instance. */
  333. .inputEx-ColorPicker-Container {
  334. width: 370px;
  335. height: 190px;
  336. }
  337. .inputEx-ColorPicker-Container-nocontrols {
  338. width: 220px;
  339. height: 190px;
  340. }
  341. /**
  342. * SliderField
  343. */
  344. div.inputEx-SliderField {
  345. }
  346. div.inputEx-SliderField div.inputEx-SliderField-bg {
  347. position: relative;
  348. background:url(?CLIENT_RESOURCE=inputex/css/'../images/slider-bg-h.gif') 5px 0 no-repeat;
  349. height:28px;
  350. width:112px;
  351. float: left;
  352. }
  353. div.inputEx-SliderField div.inputEx-SliderField-thumb {
  354. background: url(?CLIENT_RESOURCE=inputex/css/'../images/thumb-n.gif') 0px 0px no-repeat;
  355. cursor: pointer;
  356. position: absolute;
  357. top: 4px;
  358. width: 17px;
  359. height: 21px;
  360. }
  361. div.inputEx-SliderField div.inputEx-SliderField-value {
  362. float: left;
  363. margin-top:6px;
  364. margin-left: 5px;
  365. }
  366. /**
  367. * Password Field
  368. */
  369. div.inputEx-PasswordField input {
  370. float: left;
  371. }
  372. div.inputEx-PasswordField div.capsLockWarning {
  373. float: left;
  374. margin:3px 4px;
  375. color: #505050;
  376. font-size: 85%;
  377. }
  378. div.inputEx-Password-StrengthIndicator {
  379. float: left;
  380. color: #505050;
  381. font-size: 70%;
  382. margin-left:10px;
  383. width:83px;
  384. }
  385. div.inputEx-Password-StrengthIndicator div.inputEx-Password-StrengthIndicatorBlock {
  386. background-color: white;
  387. width: 1.4em;
  388. height: 7px;
  389. border: 1px solid #aaaaaa;
  390. float: left;
  391. margin-left: 2px;
  392. }
  393. /**
  394. * Checkbox
  395. */
  396. /* Common css */
  397. div.inputEx-CheckBox { padding-top:0.2em; }
  398. div.inputEx-CheckBox input { margin-right: 0.2em; }
  399. label.inputExForm-checkbox-rightLabel { cursor:pointer; }
  400. /* Awful hack to target IE < 8 */
  401. div.inputEx-CheckBox { *padding-top:0; }
  402. /* Awful hack to target webkit */
  403. @media screen and (-webkit-min-device-pixel-ratio:0) { div.inputEx-CheckBox input {position:relative; top:1px;} }
  404. /**
  405. * Radio Field
  406. */
  407. label.inputEx-RadioField-rightLabel { cursor: pointer; }
  408. div.inputEx-RadioField-choice { float: left; margin-right: 10px; padding-top:0.2em; }
  409. div.inputEx-RadioField-choice input[type="radio"] { margin-right:0.2em; }
  410. /* Vertical display */
  411. .inputEx-RadioField-Vertically .inputEx-RadioField-choice { float: none; }
  412. /**
  413. * CombineField
  414. */
  415. div.inputEx-CombineField-separator {
  416. float: left;
  417. margin-top:2px;
  418. }
  419. /**
  420. * DDList
  421. */
  422. .inputEx-DDList-item {
  423. padding: 5px;
  424. background-color: #DDDDDD;
  425. cursor: move;
  426. border: 1px solid #BBBBBB;
  427. width: 300px;
  428. position: relative;
  429. }
  430. .inputEx-DDList-item span.inputEx-DDList-label {
  431. }
  432. .inputEx-DDList-item a {
  433. color:#D05D00;
  434. padding: 3px 5px;
  435. position:absolute;
  436. right:0;
  437. top:0;
  438. cursor: pointer;
  439. }
  440. .inputEx-DDList-item a:hover {
  441. text-decoration: underline;
  442. }
  443. /**
  444. * inputEx.TypeField
  445. */
  446. div.inputEx-TypeField-EditButton {
  447. width: 16px;
  448. height: 16px;
  449. background-image: url(?CLIENT_RESOURCE=inputex/images/pencil.png);
  450. cursor: pointer;
  451. float: left;
  452. margin-left:4px;
  453. position: relative;
  454. }
  455. div.inputEx-TypeField-EditButton.opened {
  456. background-image: url(?CLIENT_RESOURCE=inputex/images/pencil_delete.png);
  457. }
  458. div.inputEx-TypeField-FieldValueWrapper {
  459. float: left;
  460. margin-left: 4px;
  461. }
  462. div.inputEx-TypeField-PropertiesPanel {
  463. border: 1px solid #aaa;
  464. padding: 3px;
  465. background-color: white;
  466. position: absolute;
  467. top: 0px;
  468. left: 16px;
  469. z-index:1;
  470. width: 380px;
  471. }
  472. /**
  473. * inputEx.MenuField
  474. */
  475. div.inputEx-MenuField div.inputEx-Result {background-color:#FFFFFF; border:1px solid #CCCCCC; padding:2px 25px 2px 5px; cursor:pointer}
  476. div.inputEx-MenuField div.inputEx-RightArrow {background-image:url(?CLIENT_RESOURCE=inputex/images/menu-right-arrow.png);background-position:right center;background-repeat:no-repeat;}
  477. div.inputEx-MenuField div.inputEx-DownArrow {background-image:url(?CLIENT_RESOURCE=inputex/images/menu-down-arrow.png);background-position:right center;background-repeat:no-repeat;}
  478. /**
  479. * inputEx-JsonTreeInspector
  480. */
  481. ul.inputEx-JsonTreeInspector li {
  482. padding-left: 20px;
  483. list-style-type: none;
  484. }
  485. ul.inputEx-JsonTreeInspector li.collapsed {
  486. background:transparent url(?CLIENT_RESOURCE=inputex/images/plus.gif) no-repeat scroll 0 0;
  487. cursor: pointer;
  488. }
  489. ul.inputEx-JsonTreeInspector li.expanded {
  490. background:transparent url(?CLIENT_RESOURCE=inputex/images/minus.gif) no-repeat scroll 0 0;
  491. cursor: pointer;
  492. }
  493. ul.inputEx-JsonTreeInspector li span {
  494. padding-left: 20px;
  495. color: green;
  496. }
  497. ul.inputEx-JsonTreeInspector li span.type-number,
  498. ul.inputEx-JsonTreeInspector li span.type-boolean {
  499. color: blue;
  500. }
  501. ul.inputEx-JsonTreeInspector li span.type-null {
  502. color: red;
  503. }
  504. /**
  505. * Datatable
  506. */
  507. .yui-skin-sam .inputex-datatable-columnsDlg {visibility:hidden;border:1px solid #808080;background-color:#E3E3E3;}
  508. .yui-skin-sam .inputex-datatable-columnsDlg .hd {font-weight:bold;padding:1em;background:none;background-color:#E3E3E3;border-bottom:0;}
  509. .yui-skin-sam .inputex-datatable-columnsDlg .ft {text-align:right;padding:.5em;background-color:#E3E3E3;}
  510. .yui-skin-sam .inputex-datatable-columnsDlg .bd {height:10em;margin:0 1em;overflow:auto;border:1px solid black;background-color:white;}
  511. .yui-skin-sam .inputex-datatable-columnsDlg .dt-dlg-pickercol {clear:both;padding:.5em 1em 3em;border-bottom:1px solid gray;}
  512. .yui-skin-sam .inputex-datatable-columnsDlg .dt-dlg-pickerkey {float:left;}
  513. .yui-skin-sam .inputex-datatable-columnsDlg .dt-dlg-pickerbtns {float:right;}
  514. /* Container workarounds for Mac Gecko scrollbar issues */
  515. .yui-skin-sam .yui-panel-container.hide-scrollbars .inputex-datatable-columnsDlg .bd {
  516. /* Hide scrollbars by default for Gecko on OS X */
  517. overflow: hidden;
  518. }
  519. .yui-skin-sam .yui-panel-container.show-scrollbars .inputex-datatable-columnsDlg .bd {
  520. /* Show scrollbars for Gecko on OS X when the Panel is visible */
  521. overflow: auto;
  522. }
  523. /**
  524. * inputEx-dtInPlaceEdit
  525. */
  526. tbody.yui-dt-data td.yui-dt-editable div.inputEx-dtInPlaceEdit-onModifyItem{
  527. background-color: #FFAFAF;
  528. }
  529. tbody.yui-dt-data div.inputEx-dtInPlaceEdit-deleteLinkSpinner{
  530. width:16px;
  531. height:16px;
  532. background:transparent url(?CLIENT_RESOURCE=inputex/images/ajax-loader.gif) no-repeat scroll 20px 4px;
  533. }
  534. .yui-dt-editor .yui-dt-button button {
  535. width: auto;
  536. }
  537. /**
  538. * StringAvailability
  539. */
  540. div.inputEx-fieldWrapper div.availabilityDiv {
  541. display:none;
  542. float:left;
  543. height:20px;
  544. }
  545. div.inputEx-fieldWrapper div.availabilityDiv div.icon {
  546. float:left;
  547. display:none;
  548. height:20px;
  549. width:16px;
  550. margin-left:5px;
  551. }
  552. div.inputEx-fieldWrapper div.availabilityDiv.loading div.icon {
  553. display:block;
  554. background: transparent url(?CLIENT_RESOURCE=inputex/images/ajax-loader.gif) no-repeat 0 3px;
  555. }
  556. div.inputEx-fieldWrapper div.availabilityDiv.available div.icon {
  557. display:block;
  558. background: transparent url(?CLIENT_RESOURCE=inputex/images/tick.gif) no-repeat 0 3px;
  559. }
  560. div.inputEx-fieldWrapper div.availabilityDiv.unavailable div.icon {
  561. display:block;
  562. background: transparent url(?CLIENT_RESOURCE=inputex/images/exclamation.gif) no-repeat 0 3px;
  563. }
  564. div.inputEx-fieldWrapper div.availabilityDiv div.text {
  565. float:left;
  566. height:20px;
  567. padding:4px 5px 0;
  568. font-size:85%;
  569. font-weight:bold;
  570. }
  571. div.inputEx-fieldWrapper div.availabilityDiv.unavailable div.text,
  572. div.inputEx-fieldWrapper div.availabilityDiv.required div.text{
  573. color:#C00E0C;
  574. }
  575. div.inputEx-fieldWrapper div.availabilityDiv.available div.text{
  576. color:#2C811D;
  577. }