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