css/dijit.css

   1 /* Tree */
   2
   3 .claro .dijitTreeRow .dijitCheckBox {
   4         position : relative;
   5         top : -2px;
   6 }
   7
   8 .claro .dijitTreeLabel {
   9         outline : 0;
  10 }
  11
  12 .claro .dijitTree .feedParam {
  13         color : #555;
  14         float : right;
  15         margin-right : 1em;
  16 }
  17
  18 .claro .dijitTree .filterRules {
  19         display : block;
  20         color : #ccc;
  21         font-size : 10px;
  22         margin-left : 100px;
  23 }
  24
  25 .claro .dijitTree .filterRules span {
  26         display : block;
  27         color : green;
  28 }
  29
  30 #filterDlg_Matches span.filterRule {
  31         color : green;
  32 }
  33
  34 .claro .dijitTree .filterRules span.inverse,
  35 #filterDlg_Matches span.filterRule.inverse {
  36         color : red;
  37 }
  38
  39
  40 .claro .dijitTree .labelParam {
  41         float : right;
  42         margin-right : 1em;
  43 }
  44
  45 .claro .dijitTree .dijitTreeLabel.Disabled,
  46 .claro .dijitTree .labelParam.Disabled {
  47         color : #555;
  48 }
  49
  50 .claro .dijitTreeRow.Error {
  51         color : red;
  52 }
  53
  54 .claro .dijitTreeRow.Hidden {
  55         display : none;
  56 }
  57
  58 .claro .dijitTreeNode .loadingNode {
  59         margin-left : 3px;
  60         height : 9px;
  61 }
  62
  63 .claro .dijitFolderClosed,
  64 .claro .dijitFolderOpened {
  65         display : none;
  66 }
  67
  68 .claro .dijitTreeNode .dijitCheckBox {
  69         margin-left : 4px;
  70 }
  71
  72 .claro .dijitTreeIsRoot > .dijitTreeRow > .dijitTreeExpando {
  73         margin-left : 5px;
  74 }
  75
  76 .claro .dijitTree .dijitTreeExpando {
  77         margin-top : 0px;
  78         opacity : 0.6;
  79 }
  80
  81 .claro .dijitTree .dijitTreeNode {
  82         padding : 0px;
  83         border-width : 0px;
  84 }
  85
  86 .claro .dijitTree .dijitTreeRow {
  87         max-width: 100%;
  88         overflow: hidden;
  89         text-overflow: ellipsis;
  90 }
  91
  92 .claro .dijitTree .dijitTreeRowSelected {
  93         background : white;
  94 }
  95
  96 .claro #feedTree.dijitTree .dijitTreeRowSelected {
  97         box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1);
  98 }
  99
 100 .claro .dijitTree .dijitTreeRowHover {
 101         background : #f0f0f0;
 102         border-color : #ddd;
 103 }
 104
 105 .claro .dijitTree .dijitTreeRowSelected {
 106         background : white;
 107         border-color : #ddd;
 108 }
 109
 110 .claro .dijitTreeRowSelected .dijitTreeLabel {
 111         text-shadow : 1px 1px 2px #fff;
 112 }
 113
 114 .claro .dijitTreeRow .dijitTreeExpando {
 115         background-image: url("../images/treeExpandImages.png");
 116         position : relative;
 117         top : -1px;
 118 }
 119
 120 .claro .dijitTreeRow .dijitTreeExpandoLeaf {
 121         background : none;
 122 }
 123
 124 /* Toolbar */
 125
 126 .claro .dijitToolbar {
 127         background : #f5f5f5;
 128         border-color : #ddd;
 129         /* text-rendering: optimizelegibility;
 130         font-family : "Segoe WP Semibold", "Segoe UI Semibold",
 131                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
 132                 Helvetica, Arial, sans-serif; */
 133 }
 134
 135 /* .claro .dijitToolbar {
 136         text-shadow : 1px 1px 2px #fff;
 137 } */
 138
 139 .claro .dijitDialog .dijitToolbar {
 140         border : 1px solid #ddd;
 141 }
 142
 143 /* Dialog */
 144
 145 .claro .dijitDialog h2 {
 146         margin-top : 0px;
 147         margin-bottom : 4px;
 148         border-width : 0px;
 149 }
 150
 151 .claro .dijitMenuItemLabel {
 152         font-size : 13px;
 153 }
 154
 155 /* Checkbox */
 156
 157 .claro .dijitCheckBox {
 158         background-image : url("../images/untick.png");
 159         background-color : transparent;
 160         width : 15px;
 161         height : 15px;
 162         margin : 1px;
 163         opacity : 0.7;
 164         background-position : center center;
 165         transition : opacity 0.25s;
 166         -webkit-transition : opacity 0.25s;
 167         /* border : 1px solid #b5bcc7; */
 168         padding : 1px;
 169 }
 170
 171  .claro .dijitCheckBox:hover {
 172         opacity : 1;
 173 }
 174
 175 .claro .dijitCheckBox.dijitCheckBoxDisabled:hover {
 176         opacity : 0.7;
 177 }
 178
 179 .claro .dijitCheckBox.dijitCheckBoxChecked {
 180         border-color : #69C671;
 181         background-image : url("../images/tick.png");
 182         opacity : 1;
 183 }
 184
 185 /* Various buttons */
 186
 187 .claro .dijitDropDownButton {
 188         margin : 0px;
 189 }
 190
 191 .claro .dijitDropDownButton .dijitButtonNode {
 192         padding : 0px;
 193 }
 194
 195 .claro .dijitButton .dijitButtonNode,
 196 .claro .dijitDropDownButton .dijitButtonNode,
 197 .claro .dijitComboButton .dijitButtonNode,
 198 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
 199 .claro .dijitToolbar .dijitComboButton,
 200 .claro .dijitToolbar .dijitSelect.dijitDownArrowButton .dijitButtonNode,
 201 .claro .dijitToolbar .dijitComboButton .dijitButtonNode {
 202         background : none;
 203         border-color : transparent;
 204         box-shadow : none;
 205 }
 206
 207 button,
 208 input[type="submit"] {
 209         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 210         font-size : 14px;
 211 }
 212
 213 button,
 214 input[type="submit"],
 215 .claro .dijitButton,
 216 .claro .dijitDropDownButton .dijitDownArrowButton,
 217 .claro .dijitComboButton {
 218   display: inline-block;
 219   padding: 4px 12px;
 220   margin-bottom: 0;
 221   font-size: 14px;
 222   line-height: 20px;
 223   color: #333333;
 224   text-align: center;
 225   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 226   vertical-align: middle;
 227   cursor: pointer;
 228   background-color: #f5f5f5;
 229   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
 230   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
 231   background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
 232   background-repeat: repeat-x;
 233   border: 1px solid #cccccc;
 234   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 235   border-bottom-color: #b3b3b3;
 236   -webkit-border-radius: 4px;
 237   border-radius: 4px;
 238   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 239   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 240 }
 241
 242 button:hover,
 243 button:focus,
 244 button:active,
 245 input[type="submit"]:hover,
 246 input[type="submit"]:focus,
 247 input[type="submit"]:active,
 248 .claro .dijitButton:hover,
 249 .claro .dijitButton:focus,
 250 .claro .dijitButton:active,
 251 .claro .dijitDropDownButton .dijitDownArrowButton:hover,
 252 .claro .dijitDropDownButton .dijitDownArrowButton:focus,
 253 .claro .dijitDropDownButton .dijitDownArrowButton:active,
 254 .claro .dijitComboButton:hover,
 255 .claro .dijitComboButton:focus,
 256 .claro .dijitComboButton:active,
 257 .claro .dijitButton.dijitButtonDisabled {
 258   color: #333333;
 259   background-color: #e6e6e6;
 260 }
 261
 262 button:active,
 263 input[type="submit"]:active,
 264 .claro .dijitButton:active,
 265 .claro .dijitDropDownButton .dijitDownArrowButton:active,
 266 .claro .dijitComboButton:active {
 267         background-color: #cccccc \9;
 268 }
 269
 270 .claro .dijitToolbar .dijitButton,
 271 .claro .dijitToolbar .dijitButton.dijitHover,
 272 .claro .dijitToolbar .dijitComboButton,
 273 .claro .dijitToolbar .dijitDropDownButton .dijitDownArrowButton,
 274 .claro .dijitToolbar .dijitComboButton.dijitHover {
 275         background : none;
 276         border-color : transparent;
 277         box-shadow : none;
 278         padding : 0px;
 279         margin : 0px;
 280         line-height : auto;
 281         text-shadow : none;
 282 }
 283
 284 .claro .dijitToolbar .dijitDropDownButton .dijitButtonText,
 285 .claro .dijitToolbar .dijitDownArrowButton .dijitButtonText,
 286 .claro .dijitToolbar .dijitComboButton .dijitButtonText {
 287         padding : 0px;
 288 }
 289
 290 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode {
 291         border-radius : 4px;
 292 }
 293
 294 .claro .dijitToolbar .dijitButton.dijitHover,
 295 .claro .dijitToolbar .dijitDropDownButton.dijitHover .dijitButtonNode,
 296 .claro .dijitToolbar .dijitComboButton.dijitHover {
 297         border-color : #ccc;
 298 }
 299
 300 .claro .dijitToolbar .dijitButton.dijitHover .dijitButtonNode,
 301 .claro .dijitToolbar .dijitButton.dijitButtonActive .dijitButtonNode {
 302         background : none;
 303 }
 304
 305 .claro .dijitToolbar .dijitButton .dijitButtonContents,
 306 .claro .dijitToolbar .dijitDropDownButton .dijitButtonContents,
 307 .claro .dijitToolbar .dijitComboButton .dijitButtonContents {
 308         font-size : 13px;
 309 }
 310
 311 button:hover,
 312 button:focus,
 313 input[type="submit"]:hover,
 314 input[type="submit"]:focus,
 315 .claro .dijitButton:hover,
 316 .claro .dijitDropDownButton .dijitDownArrowButton:hover,
 317 .claro .dijitToolbar .dijitButton:hover .dijitButtonNode,
 318 .claro .dijitToolbar .dijitButton.dijitHover .dijitButtonNode,
 319 .claro .dijitButton:focus,
 320 .claro .dijitComboButton:hover,
 321 .claro .dijitComboButton:focus {
 322   color: #333333;
 323   text-decoration: none;
 324   background-position: 0 -15px;
 325   -webkit-transition: background-position 0.1s linear;
 326   transition: background-position 0.1s linear;
 327 }
 328
 329 button:focus,
 330 input[type="submit"]:focus,
 331 .claro .dijitButton:focus,
 332 .claro .dijitDropDownButton .dijitDownArrowButton:focus,
 333 .claro .dijitComboButton:focus {
 334   outline: thin dotted #333;
 335   outline: 5px auto -webkit-focus-ring-color;
 336   outline-offset: -2px;
 337 }
 338
 339 button:active,
 340 input[type="submit"]:active,
 341 .claro .dijitButton:active,
 342 .claro .dijitComboButton:active,
 343 .claro .dijitToolbar .dijitDropDownButton.dijitOpened,
 344 .claro .dijitToolbar .dijitComboButton.dijitOpened,
 345 .claro .dijitToolbar .dijitButton.dijitButtonActive .dijitButtonNode {
 346   background-image: none;
 347   outline: 0;
 348   -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 349   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 350 }
 351
 352 input[type="submit"][disabled],
 353 button[disabled],
 354 .claro .dijitButton[disabled],
 355 .claro .dijitDropDownButton .dijitDownArrowButton[disabled],
 356 .claro .dijitButton.dijitButtonDisabled,
 357 .claro .dijitComboButton.dijitButtonDisabled {
 358   cursor: default;
 359   background-image: none;
 360   opacity: 0.65;
 361   filter: alpha(opacity=65);
 362   -webkit-box-shadow: none;
 363   box-shadow: none;
 364 }
 365
 366 .claro .dijitButton .dijitButtonContents,
 367 .claro .dijitDropDownButton .dijitButtonContents,
 368 .claro .dijitComboButton .dijitButtonContents {
 369         font-size : 14px;
 370         font-weight : normal;
 371         line-height : 20px;
 372 }
 373
 374 .claro .dijitButton.small .dijitButtonText {
 375         font-size : 11px;
 376 }
 377
 378 .claro .dijitMenu {
 379         border-color: rgba(82, 168, 236, 0.8);
 380 }
 381
 382 .claro .dijitMenu .dijitMenuItem.dijitHover,
 383 .claro .dijitMenu .dijitMenuItem.dijitFocused,
 384 .claro .dijitMenuTable .dijitMenuItem.dijitHover .dijitMenuItemLabel,
 385 .claro .dijitMenuTable .dijitMenuItem.dijitFocused .dijitMenuItemLabel {
 386         background :  rgba(82, 168, 236, 0.8);
 387         color : white;
 388         border-color : rgba(82, 168, 236, 0.8);
 389 }
 390
 391 .claro .dijitButton .dijitButtonNode,
 392 .claro .dijitComboButton .dijitButtonNode {
 393         padding : 0px;
 394 }
 395
 396 /* Other stuff */
 397
 398 /* .claro .dijitAccordionTitleFocus {
 399         text-shadow : 1px 1px 2px #fff;
 400 }
 401
 402 .claro .dijitAccordionTitle {
 403         text-rendering: optimizelegibility;
 404         font-family : "Segoe WP Semibold", "Segoe UI Semibold",
 405                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
 406                 Helvetica, Arial, sans-serif;
 407 } */
 408
 409 .claro .dijitAccordionInnerContainer.dijitAccordionInnerContainerSelected {
 410         border-color : #ccc;
 411 }
 412
 413 .claro .dijitAccordionContainer .dijitAccordionChildWrapper {
 414         border-color : #ddd;
 415 }
 416
 417 /* Tabs */
 418
 419 .claro .dijitTabContent {
 420         background : #eee;
 421 }
 422
 423 .claro .dijitTabContent.dijitTabChecked,
 424 .claro .dijitTabContent.dijitTabHover,
 425 .claro .dijitTabContent.dijitFocused {
 426         background : white;
 427 }
 428
 429 .claro .dijitTabPaneWrapper,
 430 .claro .dijitTabContainerTop-tabs,
 431 .claro .dijitTab,
 432 .claro .dijitAccordionInnerContainer {
 433         border-color : #ddd;
 434 }
 435
 436 /* Text fields & selects */
 437
 438 .claro .dijitComboBox .dijitArrowButton,
 439 .claro .dijitSelect .dijitArrowButton {
 440         background : transparent;
 441         border-color : transparent;
 442 }
 443
 444 .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
 445         margin-right : 5px;
 446         float  :right;
 447 }
 448
 449 .claro .dijitDownArrowButton.dijitSelect {
 450         -webkit-border-radius: 4px;
 451         -moz-border-radius: 4px;
 452         border-radius: 4px;
 453         margin-bottom : 4px;
 454
 455 }
 456
 457 .claro .dijitSelect .dijitButtonContents {
 458         display: inline-block;
 459         height: 20px;
 460         padding: 4px 6px;
 461         font-size: 14px;
 462         line-height: 20px;
 463         color: #555555;
 464         vertical-align: middle;
 465         border-width : 0px;
 466 }
 467
 468 .claro .input.input-text,
 469 .claro .dijitTextBox {
 470         display: inline-block;
 471         height: 20px;
 472         padding: 4px 6px;
 473         font-size: 14px;
 474         line-height: 20px;
 475         color: #555555;
 476         vertical-align: middle;
 477         -webkit-border-radius: 4px;
 478         -moz-border-radius: 4px;
 479         border-radius: 4px;
 480         margin-bottom : 4px;
 481 }
 482
 483 .claro .input.input-text {
 484         height : 30px;
 485 }
 486
 487 .claro .input.input-text,
 488 .claro .dijitTextBox,
 489 .claro .dijitSelect {
 490         background-color: #ffffff;
 491         border: 1px solid #cccccc;
 492         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 493         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 494         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 495         -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 496         -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 497         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 498         transition: border linear 0.2s, box-shadow linear 0.2s;
 499 }
 500
 501 .claro .input.input-text:focus,
 502 .claro .dijitTextBox.dijitFocused,
 503 .claro .dijitSelect.dijitFocused {
 504         border-color: rgba(82, 168, 236, 0.8);
 505         outline: 0;
 506         outline: thin dotted \9;
 507         /* IE6-9 */
 508
 509         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 510         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 511         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 512 }
 513
 514 .claro .dijitError .dijitValidationContainer {
 515         padding : 0px;
 516         width : 13px;
 517         border-width : 1px;
 518         display : none;
 519 }
 520
 521 .claro .dijitTextBox.dijitReadOnly,
 522 .claro .dijitTextBox.dijitReadOnly .dijitInputField .dijitInputInner {
 523         cursor: not-allowed;
 524         background-color: #eeeeee;
 525 }
 526
 527 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect {
 528         border-color : rgba(0,0,0,0.1);
 529 }
 530
 531 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect .dijitButtonContents {
 532         padding : 2px 2px 0px 4px;
 533 }
 534
 535 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect {
 536         margin : 0px;
 537 }
 538
 539 .claro .dijitToolbar .dijitTextBox {
 540         padding : 0px;
 541         margin-bottom : 0px;
 542         border-radius : 0px;
 543 }
 544
 545 /* dialog */
 546
 547 .claro .dijitDialog {
 548         border-radius : 6px;
 549
 550 }
 551
 552 .claro .dijitDialog .dijitDialogCloseIcon {
 553         margin-top : 5px;
 554 }
 555
 556 .claro .dijitDialog .dijitDialogTitleBar {
 557         background : white;
 558         padding : 8px;
 559         font-weight : 600;
 560         color : #555;
 561         font-size : 16px;
 562         text-rendering: optimizelegibility;
 563         font-family : "Segoe WP Semibold", "Segoe UI Semibold",
 564         "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue",
 565         Helvetica, Arial, sans-serif;
 566 }
 567
 568 .claro .dijitDialog .dijitDialogPaneContent {
 569         border-color : #ddd;
 570         padding : 10px;
 571 }