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