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