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 .dijitDownArrowButton.dijitSelect {
 475         -webkit-border-radius: 4px;
 476         -moz-border-radius: 4px;
 477         border-radius: 4px;
 478         margin-bottom : 4px;
 479
 480 }
 481
 482 .claro .dijitSelect .dijitButtonContents {
 483         display: inline-block;
 484         height: 20px;
 485         padding: 4px 6px;
 486         font-size: 14px;
 487         line-height: 20px;
 488         color: #555555;
 489         vertical-align: middle;
 490         border-width : 0px;
 491 }
 492
 493 .claro .input.input-text,
 494 .claro .dijitTextBox {
 495         display: inline-block;
 496         height: 20px;
 497         padding: 4px 6px;
 498         font-size: 14px;
 499         line-height: 20px;
 500         color: #555555;
 501         vertical-align: middle;
 502         -webkit-border-radius: 4px;
 503         -moz-border-radius: 4px;
 504         border-radius: 4px;
 505         margin-bottom : 4px;
 506 }
 507
 508 .claro .input.input-text {
 509         height : 30px;
 510 }
 511
 512 .claro .input.input-text,
 513 .claro .dijitTextBox,
 514 .claro .dijitSelect {
 515         background-color: #ffffff;
 516         border: 1px solid #cccccc;
 517         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 518         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 519         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 520         -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 521         -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 522         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 523         transition: border linear 0.2s, box-shadow linear 0.2s;
 524 }
 525
 526 .claro .input.input-text:focus,
 527 .claro .dijitTextBox.dijitFocused,
 528 .claro .dijitSelect.dijitFocused {
 529         border-color: rgba(82, 168, 236, 0.8);
 530         outline: 0;
 531         outline: thin dotted \9;
 532         /* IE6-9 */
 533
 534         -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 535         -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 536         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
 537 }
 538
 539 .claro .dijitError .dijitValidationContainer {
 540         padding : 0px;
 541         width : 13px;
 542         border-width : 1px;
 543         display : none;
 544 }
 545
 546 .claro .dijitSelect.dijitSelectDisabled  {
 547         background-color: #eeeeee;
 548 }
 549
 550 .claro .dijitSelect.dijitSelectDisabled .dijitSelectLabel {
 551         cursor: not-allowed;
 552 }
 553
 554 .claro .dijitTextBox.dijitReadOnly,
 555 .claro .dijitTextBox.dijitReadOnly .dijitInputField .dijitInputInner {
 556         cursor: not-allowed;
 557         background-color: #eeeeee;
 558 }
 559
 560 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect {
 561         border-color : rgba(0,0,0,0.1);
 562 }
 563
 564 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect .dijitButtonContents {
 565         padding : 2px 2px 0px 4px;
 566 }
 567
 568 .claro .dijitToolbar .dijitDownArrowButton.dijitSelect {
 569         margin : 0px;
 570 }
 571
 572 .claro .dijitToolbar .dijitTextBox {
 573         padding : 0px;
 574         margin-bottom : 0px;
 575         border-radius : 0px;
 576 }
 577
 578 /* dialog */
 579
 580 .claro .dijitDialog {
 581         border-radius : 6px;
 582
 583 }
 584
 585 .claro .dijitDialog .dijitDialogCloseIcon {
 586         margin-top : 5px;
 587 }
 588
 589 .claro .dijitDialog .dijitDialogTitleBar {
 590         background : white;
 591         padding : 8px;
 592         font-weight : 600;
 593         color : #555;
 594         font-size : 16px;
 595         text-rendering: optimizelegibility;
 596         font-family : "Segoe WP Semibold", "Segoe UI Semibold",
 597         "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "DejaVu Sans", "Helvetica Neue",
 598         Helvetica, Arial, sans-serif;
 599 }
 600
 601 .claro .dijitDialog .dijitDialogPaneContent {
 602         border-color : #ddd;
 603         padding : 10px;
 604 }
 605
 606 .claro .dijitProgressBar.dijitProgressBarEmpty {
 607         background : #ddd;
 608         border-color : #0088cc;
 609 }
 610
 611 .claro .dijitProgressBar.dijitProgressBarEmpty .dijitProgressBarFull .dijitProgressBarTile {
 612         background : rgb(82, 168, 236);
 613
 614 }
 615
 616 .claro .dijitProgressBar .dijitProgressBarLabel {
 617         color : white;
 618 }