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 .dijitMenuItem.dijitHover,
 421 .claro .dijitMenu .dijitMenuItem.dijitFocused,
 422 .claro .dijitMenuTable .dijitMenuItem.dijitHover .dijitMenuItemLabel,
 423 .claro .dijitMenuTable .dijitMenuItem.dijitFocused .dijitMenuItemLabel {
 424         background :  rgb(82, 168, 236);
 425         color : white;
 426         border-color : rgba(82, 168, 236, 0.8);
 427 }
 428
 429 .claro .dijitButton .dijitButtonNode,
 430 .claro .dijitComboButton .dijitButtonNode {
 431         padding : 0px;
 432 }
 433
 434 /* Other stuff */
 435
 436 /* .claro .dijitAccordionTitleFocus {
 437         text-shadow : 1px 1px 2px #fff;
 438 }
 439
 440 .claro .dijitAccordionTitle {
 441         text-rendering: optimizelegibility;
 442         font-family : "Segoe WP Semibold", "Segoe UI Semibold",
 443                 "Segoe UI Web Semibold", "Segoe UI", "Helvetica Neue",
 444                 Helvetica, Arial, sans-serif;
 445 } */
 446
 447
 448 .claro .dijitAccordionTitle.dijitAccordionTitleHover,
 449 .claro .dijitAccordionTitle.dijitAccordionTitleFocused {
 450         background : white;
 451         transition : background 0.25s;
 452 }
 453 .claro .dijitAccordionTitle {
 454         background : #f0f0f0;
 455         transition : background 0.25s;
 456 }
 457
 458 .claro .dijitAccordionInnerContainer.dijitAccordionInnerContainerSelected,
 459 .claro .dijitAccordionTitle.dijitAccordionTitleSelected {
 460         background : #0088cc;
 461         transition : background 0.25s;
 462 }
 463
 464 .claro .dijitAccordionTitle.dijitAccordionTitleSelected .dijitAccordionText {
 465         color : white;
 466 }
 467
 468 .claro .dijitAccordionInnerContainer.dijitAccordionInnerContainerSelected {
 469         border-color : #0088cc;
 470 }
 471
 472 .claro .dijitAccordionContainer .dijitAccordionChildWrapper {
 473         border-color : #ddd;
 474 }
 475
 476 /* Tabs */
 477
 478 .claro .dijitTabInner.dijitTab {
 479         background : #f0f0f0;
 480 }
 481
 482 .claro .dijitTabContent {
 483         background : #eee;
 484 }
 485
 486 .claro .dijitTabContent.dijitTabChecked,
 487 .claro .dijitTabContent.dijitTabHover,
 488 .claro .dijitTabContent.dijitFocused {
 489         background : white;
 490 }
 491
 492 .claro .dijitTabPaneWrapper,
 493 .claro .dijitTabContainerTop-tabs,
 494 .claro .dijitTab,
 495 .claro .dijitAccordionInnerContainer {
 496         border-color : #ddd;
 497 }
 498
 499 /* Text fields & selects */
 500
 501 .claro .dijitComboBox .dijitArrowButton,
 502 .claro .dijitSelect .dijitArrowButton {
 503         background : transparent;
 504         border-color : transparent;
 505 }
 506
 507 .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
 508         margin-right : 5px;
 509         float  :right;
 510 }
 511
 512 .claro select,
 513 .claro .dijitDownArrowButton.dijitSelect {
 514         -webkit-border-radius: 4px;
 515         -moz-border-radius: 4px;
 516         border-radius: 4px;
 517         margin-bottom : 4px;
 518
 519 }
 520
 521 .claro .dijitSelect .dijitButtonContents {
 522         display: inline-block;
 523         height: 20px;
 524         padding: 4px 6px;
 525         font-size: 14px;
 526         line-height: 20px;
 527         color: #555555;
 528         vertical-align: middle;
 529         border-width : 0px;
 530 }
 531
 532 .claro select,
 533 .claro textarea,
 534 .claro .input.input-text,
 535 .claro .dijitTextBox {
 536         display: inline-block;
 537         height: 20px;
 538         padding: 4px 6px;
 539         font-size: 14px;
 540         line-height: 20px;
 541         color: #555555;
 542         vertical-align: middle;
 543         -webkit-border-radius: 4px;
 544         -moz-border-radius: 4px;
 545         border-radius: 4px;
 546         margin-bottom : 4px;
 547 }
 548 .claro textarea {
 549         height : auto;
 550 }
 551
 552 .claro select,
 553 .claro .input.input-text {
 554         height : 30px;
 555 }
 556
 557 .claro textarea,
 558 .claro select,
 559 .claro .input.input-text,
 560 .claro .dijitTextBox,
 561 .claro .dijitSelect {
 562         background-color: #ffffff;
 563         border: 1px solid #cccccc;
 564         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 565         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 566         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 567         -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 568         -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 569         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 570         transition: border linear 0.2s, box-shadow linear 0.2s;
 571 }
 572
 573 .claro select:focus,
 574 .claro .input.input-text:focus,
 575 .claro .dijitTextBox.dijitFocused,
 576 .claro .dijitSelect.dijitFocused {
 577         border-color: rgba(82, 168, 236, 0.8);
 578         outline: 0;
 579         outline: thin dotted \9;
 580         /* IE6-9 */
 581
 582         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 583         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 584         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 585 }
 586
 587 .claro .dijitError .dijitValidationContainer {
 588         padding : 0px;
 589         width : 13px;
 590         border-width : 1px;
 591         display : none;
 592 }
 593
 594 .claro .dijitSelect.dijitSelectDisabled  {
 595         background-color: #eeeeee;
 596 }
 597
 598 .claro .dijitSelect.dijitSelectDisabled .dijitSelectLabel {
 599         cursor: not-allowed;
 600 }
 601
 602 .claro .dijitTextBox.dijitTextBoxDisabled,
 603 .claro .dijitTextBox.dijitTextBoxDisabled .dijitInputInner,
 604 .claro .dijitTextBox.dijitReadOnly,
 605 .claro .dijitTextBox.dijitReadOnly .dijitInputInner {
 606         cursor: not-allowed;
 607         background-color: #eeeeee;
 608 }
 609
 610 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect {
 611         border-color : rgba(0,0,0,0.1);
 612 }
 613
 614 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect .dijitButtonContents {
 615         padding : 2px 2px 0px 4px;
 616 }
 617
 618 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect {
 619         margin : 0px;
 620 }
 621
 622 .claro .dijitToolbar .dijitTextBox {
 623         padding : 0px;
 624         margin-bottom : 0px;
 625         border-radius : 0px;
 626 }
 627
 628 /* dialog */
 629
 630 .claro .dijitDialog {
 631         border-radius : 6px;
 632
 633 }
 634
 635 .claro .dijitDialog .dijitDialogCloseIcon {
 636         margin-top : 5px;
 637 }
 638
 639 .claro .dijitDialog .dijitDialogTitleBar {
 640         background : white;
 641         padding : 8px;
 642         font-weight : 600;
 643         color : #555;
 644         font-size : 16px;
 645         text-rendering: optimizelegibility;
 646         font-family : "Segoe WP Semibold", "Segoe UI Semibold",
 647         "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue",
 648         Helvetica, Arial, sans-serif;
 649 }
 650
 651 .claro .dijitDialog .dijitDialogPaneContent {
 652         border-color : #ddd;
 653         padding : 10px;
 654 }
 655
 656 .claro .dijitProgressBar.dijitProgressBarEmpty {
 657         background : #ddd;
 658         border-color : #0088cc;
 659 }
 660
 661 .claro .dijitProgressBar.dijitProgressBarEmpty .dijitProgressBarFull .dijitProgressBarTile {
 662         background : rgb(82, 168, 236);
 663
 664 }
 665
 666 .claro .dijitProgressBar .dijitProgressBarLabel {
 667         color : white;
 668 }
 669
 670