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