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