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