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