src/third_party/WebKit/Source/devtools/front_end/helpScreen.css

   1 .help-window-outer {
   2     position: absolute !important;
   3     top: 0;
   4     left: 0;
   5     right: 0;
   6     bottom: 0;
   7     z-index: 2000;
   8 }
   9
  10 .help-window-main {
  11     max-height: 100%;
  12     color: white;
  13     background-color: rgba(17, 17, 17, 0.85);
  14     display: -webkit-flex;
  15     -webkit-flex-direction: column;
  16     border-top-width: 0;
  17     border-radius: 10px;
  18 }
  19
  20 .help-window-main a {
  21     color: rgb(17, 85, 204);
  22 }
  23
  24 .help-window-caption {
  25     border-bottom: solid 1px rgb(153, 153, 153);
  26     margin: 0 8px;
  27     padding: 0 2px;
  28     line-height: 28px;
  29 }
  30
  31 .help-window-title {
  32     font-size: 16px;
  33     margin: 0;
  34     padding-top: 1px;
  35     margin-bottom: -1px;
  36 }
  37
  38 .help-content {
  39     overflow-y: auto;
  40     overflow-x: hidden;
  41     margin: 8px;
  42     padding: 0 4px;
  43     flex: auto;
  44 }
  45
  46 .help-footnote {
  47     border-top: 1px solid #EEEEEE;
  48     margin: 0;
  49     padding: 12px;
  50 }
  51
  52 .help-window-main .help-container-wrapper::-webkit-scrollbar {
  53     width: 11px;
  54 }
  55
  56 .help-window-main .help-container-wrapper::-webkit-scrollbar-corner,
  57 .help-window-main .help-container-wrapper::-webkit-resizer {
  58     display: none;
  59 }
  60
  61 .help-window-main .help-container-wrapper::-webkit-scrollbar-thumb:vertical {
  62     background: linear-gradient(to right, rgb(128, 128, 128), rgb(96, 96, 96) 40%, rgb(128, 128, 128));
  63     border-radius: 5px;
  64     min-height: 20px;
  65 }
  66
  67 .help-window-main .help-container-wrapper::-webkit-scrollbar-thumb:vertical:hover,
  68 .help-window-main .help-container-wrapper::-webkit-scrollbar-thumb:vertical:active {
  69     background: linear-gradient(to right, rgb(176, 176, 176), rgb(144, 144, 144) 40%, rgb(176, 176, 176));
  70 }
  71
  72 .help-window-main .help-container-wrapper::-webkit-scrollbar-track:vertical {
  73     background: linear-gradient(to right, rgb(10, 10, 10), rgb(32, 32, 32) 25%, rgb(32, 32, 32));
  74     border-radius: 5px;
  75 }
  76
  77 .help-close-button {
  78     position: absolute;
  79     top: 8px;
  80     right: 8px;
  81 }
  82
  83 body.dock-to-bottom .help-content {
  84     margin-bottom: 8px;
  85 }
  86
  87 body.platform-mac .help-window-main .tabbed-pane-header-contents {
  88     margin-left: 27px;
  89 }
  90
  91 body.platform-mac .help-window-main .help-window-title {
  92     margin-left: 18px;
  93 }
  94
  95 .help-container {
  96     width: 100%;
  97     -webkit-user-select: auto;
  98     -webkit-column-width: 470px;
  99 }
 100
 101 body.platform-mac .settings-tab .help-container {
 102     -webkit-column-width: 430px;
 103 }
 104
 105 body.platform-mac .help-container {
 106     -webkit-column-width: 361px;
 107 }
 108
 109 .help-no-columns {
 110     -webkit-column-width: initial !important;
 111 }
 112
 113 .help-block {
 114     display: block;
 115     padding-bottom: 9px;
 116     width: 470px;
 117     -webkit-column-break-inside: avoid;
 118 }
 119
 120 body.platform-mac .settings-tab .help-block {
 121     width: 430px;
 122 }
 123
 124 .settings-tab.help-container {
 125     -webkit-column-width: 410px;
 126 }
 127
 128 .settings-tab .help-block {
 129     width: 410px;
 130     margin-left: 20px;
 131 }
 132
 133 .settings-tab .field-error-message {
 134     color: DarkRed;
 135 }
 136
 137 .help-line {
 138     padding-bottom: 5px;
 139     margin-bottom: 5px;
 140 }
 141
 142 .help-key-cell {
 143     display: inline-block;
 144     width: 270px;
 145     text-align: right;
 146 }
 147
 148 body.platform-mac .help-key-cell {
 149     width: 151px;
 150 }
 151
 152 .help-cell {
 153     display: inline;
 154 }
 155
 156 .help-section-title {
 157     font-size: 120%;
 158 }
 159
 160 .help-key {
 161     padding: 0.1em 0.6em;
 162     border: 1px solid #ccc;
 163     font-size: 11px;
 164     background-color: #f7f7f7;
 165     color: #333;
 166     box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
 167     border-radius: 3px;
 168     display: inline-block;
 169     margin: 0 0.1em;
 170     text-shadow: 0 1px 0 #fff;
 171     line-height: 1.5;
 172     white-space: nowrap;
 173 }
 174
 175 body.platform-mac .help-key {
 176     font-family: Lucida Grande, sans-serif;
 177 }
 178
 179 .help-combine-keys,
 180 .help-key-delimiter {
 181     font-size: 9px;
 182 }
 183
 184 .help-combine-keys {
 185     margin: 0 0.3em;
 186 }
 187
 188 .help-key-delimiter {
 189     margin: 0 0.5em;
 190 }
 191
 192 .help-window-outer fieldset {
 193     margin: 0;
 194     padding: 0;
 195     border: none;
 196 }
 197
 198 .settings-tab label {
 199     padding-right: 4px;
 200     display: flex;
 201 }
 202
 203 #general-tab-content .help-block fieldset legend {
 204     font-size: 14px;
 205 }
 206
 207 .help-block p p {
 208     padding-left: 30px;
 209 }
 210
 211 #enable-devtools-on-startup {
 212     margin: 0 0 0 80px;
 213     display: inline-block;
 214 }
 215
 216 .help-content p.help-section {
 217     margin: 0 0 15px 0;
 218 }
 219
 220 .settings-experiments-warning-subsection-warning {
 221     color: rgb(200, 0, 0);
 222 }
 223
 224 .settings-experiments-warning-subsection-message {
 225     color: inherit;
 226 }
 227
 228 #resolution-override-section {
 229     margin-left: 13px;
 230 }
 231
 232 .help-content input[type=checkbox] {
 233     margin-right: 7px;
 234 }
 235
 236 .help-content select {
 237     background-color: rgb(64, 64, 64);
 238     color: white;
 239     border-color: black;
 240     padding: 0 4px;
 241 }
 242
 243 .help-content select:disabled {
 244     background-color: rgb(32, 32, 32);
 245     color: graytext;
 246 }
 247
 248 .help-content option {
 249     background-color: #EEEEEE;
 250     color: #222;
 251 }
 252
 253 #settings-screen .help-window-main{
 254     color: rgb(48, 57, 66);
 255     background-color: white;
 256     border-radius: 0;
 257 }
 258
 259 #settings-screen .help-window-main {
 260     position: absolute;
 261     top: 10px;
 262     right: 10px;
 263     bottom: 10px;
 264     left: 10px;
 265     height: initial;
 266     padding: 21px 0 0 21px;
 267     box-shadow: 1px 1px 5px 2px rgba(128, 128, 128, 0.7);
 268 }
 269
 270 #settings-screen .help-window-label {
 271     font-size: 18px;
 272     color: inherit;
 273     padding-top: 1px;
 274 }
 275
 276 .help-container-wrapper {
 277     position: absolute;
 278     top: 54px;
 279     left: 15px;
 280     right: 0;
 281     bottom: 0;
 282     overflow: auto;
 283 }
 284
 285 #settings-screen .tabbed-pane-header {
 286     border: none transparent;
 287     height: auto;
 288     width: 110px;
 289     margin-top: 14px;
 290     flex: auto;
 291 }
 292
 293 #settings-screen .tabbed-pane-header-contents {
 294     margin: 0;
 295 }
 296
 297 #settings-screen .tabbed-pane-header-tabs {
 298     display: flex;
 299     flex-direction: column;
 300     padding-top: 5px;
 301     width: 100px;
 302 }
 303
 304 #settings-screen .tabbed-pane-header-tab {
 305     background-color: transparent;
 306     border: none transparent;
 307     font-weight: normal;
 308     text-shadow: none;
 309     color: #999999;
 310     height: 22px;
 311     padding-left: 0;
 312 }
 313
 314 #settings-screen .tabbed-pane-header-tab:not(.selected) {
 315     cursor: pointer;
 316 }
 317
 318 #settings-screen .tabbed-pane-header-tab.selected {
 319     color: inherit;
 320 }
 321
 322 #settings-screen .tabbed-pane-content {
 323     position: absolute;
 324     top: 0;
 325     right: 0;
 326     bottom: 0;
 327     margin: 8px;
 328 }
 329
 330 #settings-screen .tabbed-pane-content {
 331     left: 120px;
 332 }
 333
 334 .settings-tab.help-content {
 335     margin: 0;
 336     padding: 0;
 337 }
 338
 339 .settings-tab input:not([type]),
 340 .settings-tab input[type="text"] {
 341     border: 1px solid rgb(213, 213, 213);
 342     border-radius: 2px;
 343     color: #444444;
 344     padding: 3px;
 345 }
 346
 347 .settings-tab input.numeric {
 348     text-align: right;
 349 }
 350
 351 .settings-tab-container {
 352     flex: auto;
 353 }
 354
 355 .settings-tab-container header {
 356     padding: 14px 0 6px;
 357     border-bottom: 1px solid #EEEEEE;
 358 }
 359
 360 #tab-shortcuts {
 361     margin-top: 25px !important;
 362 }
 363
 364 #experiments-tab-content .help-container {
 365     -webkit-column-width: 470px;
 366 }
 367
 368 #experiments-tab-content .help-block {
 369     width: 470px;
 370 }
 371
 372 .settings-tab-container header > h3 {
 373     font-size: 18px;
 374     font-weight: normal;
 375     margin: 0;
 376     padding-bottom: 3px;
 377 }
 378
 379 .settings-tab .help-section-title {
 380     margin-left: -20px;
 381     color: #222;
 382 }
 383
 384 .settings-tab .help-block fieldset:disabled label:hover {
 385     color: inherit;
 386 }
 387
 388 .settings-tab .help-block label:hover {
 389     color: #222;
 390 }
 391
 392 .settings-tab p {
 393     margin: 12px 0;
 394 }
 395
 396 .settings-tab select {
 397     background-color: #FAFAFA;
 398     border-color: rgb(213, 213, 213);
 399     border-radius: 2px;
 400     color: inherit;
 401     padding: 0 4px;
 402 }
 403
 404 .settings-tab select:disabled {
 405     background-color: rgb(221, 221, 221);
 406 }
 407
 408 .settings-tab .workspace-settings-row input {
 409     width: 190px;
 410 }
 411
 412 #workspace-tab-content .settings-tab.help-content.help-container {
 413     -webkit-column-width: initial;
 414 }
 415
 416
 417 #workspace-tab-content .button:hover {
 418     opacity: 1.0 !important;
 419 }
 420
 421 #workspace-tab-content .workspace-settings-row:hover .button {
 422     visibility: visible;
 423     opacity: 0.4;
 424 }
 425
 426 #workspace-tab-content .workspace-settings-row .button {
 427     width: 10px;
 428     height: 10px;
 429     border: none;
 430     -webkit-appearance: none;
 431     background-color: transparent;
 432     visibility: hidden;
 433     background-position: center;
 434     margin: 0 0 0 4px;
 435 }
 436
 437 #workspace-tab-content .workspace-settings-row .remove-button {
 438     background-image: url(Images/deleteIcon.png);
 439 }
 440
 441 #workspace-tab-content .workspace-settings-row .add-button {
 442     background-image: url(Images/addIcon.png);
 443 }
 444
 445 #workspace-tab-content .workspace-settings-error {
 446     color: red;
 447 }
 448
 449 .settings-tab-text-button {
 450     background-image: linear-gradient(hsl(0, 0%, 93%), hsl(0, 0%, 93%) 38%, hsl(0, 0%, 87%));
 451     border: 1px solid hsla(0, 0%, 0%, 0.25);
 452     border-radius: 2px;
 453     box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.08), inset 0 1px 2px hsla(0, 100%, 100%, 0.75);
 454     color: hsl(0, 0%, 27%);
 455     font-size: 12px;
 456     margin: 0 1px 0 0;
 457     text-shadow: 0 1px 0 hsl(0, 0%, 94%);
 458     min-height: 2em;
 459     padding-left: 10px;
 460     padding-right: 10px;
 461 }
 462
 463 .settings-tab-text-button:disabled {
 464     background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 465     border-color: rgba(80, 80, 80, 0.2);
 466     box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
 467     color: #aaa;
 468 }
 469
 470 .settings-tab-text-button:not(:disabled):hover {
 471     background-image: linear-gradient(hsl(0, 0%, 94%), hsl(0, 0%, 94%) 38%, hsl(0, 0%, 88%));
 472     border-color: hsla(0, 0%, 0%, 0.3);
 473     box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.12), inset 0 1px 2px hsla(0, 100%, 100%, 0.95);
 474     color: hsl(0, 0%, 0%);
 475 }
 476
 477 .settings-tab-text-button:not(:disabled):active {
 478     background-image: linear-gradient(hsl(0, 0%, 91%), hsl(0, 0%, 91%) 38%, hsl(0, 0%, 84%));
 479     box-shadow: none;
 480     text-shadow: none;
 481 }
 482
 483 .settings-tab .settings-list-container {
 484     background-color: white;
 485     margin-bottom: 10px;
 486 }
 487
 488 .settings-tab .settings-list {
 489     border: 1px solid hsl(0, 0%, 85%);
 490     border-radius: 2px;
 491 }
 492
 493 .settings-tab .settings-list .settings-list-item .settings-list-item-contents {
 494     width: 100%;
 495     height: 40px;
 496     -webkit-box-align: center;
 497     -webkit-transition: 150ms background-color;
 498     display: -webkit-box;
 499     padding-right: 3px;
 500 }
 501
 502 .settings-tab .settings-list .settings-list-item .settings-list-item-contents > :first-child {
 503     -webkit-box-align: center;
 504     -webkit-box-flex: 1;
 505     -webkit-padding-end: 5px;
 506     display: -webkit-box;
 507 }
 508
 509 .settings-tab .settings-list .settings-list-item.selected:not(.editable) {
 510     background-color: hsl(0, 0%, 82%);
 511 }
 512
 513 .settings-tab .settings-list .settings-list-item:hover {
 514     background-color: hsl(215, 54%, 93%);
 515 }
 516
 517 .settings-tab .settings-list .settings-list-item.selected:not(.editable):hover {
 518     background-color: hsl(215, 51%, 82%);
 519 }
 520
 521 .settings-tab .settings-list .settings-list-item .remove-item-button {
 522     -webkit-transition: 150ms opacity;
 523     background-color: hsla(0, 0%, 0%, 0);
 524     background-image: -webkit-image-set(
 525         url(Images/settingsListRemove.png) 1x,
 526         url(Images/settingsListRemove_2x.png) 2x);
 527     background-size: 48px 16px;
 528     border: none;
 529     display: block;
 530     height: 16px;
 531     width: 16px;
 532     opacity: 0;
 533     pointer-events: none;
 534 }
 535
 536 .settings-tab .settings-list .settings-list-item.selected .remove-item-button,
 537 .settings-tab .settings-list .settings-list-item:hover .remove-item-button {
 538     opacity: 1;
 539     pointer-events: auto;
 540 }
 541
 542 .settings-tab .settings-list .settings-list-item .remove-item-button:hover {
 543     background-position-x: -32px;
 544 }
 545
 546 .settings-tab .settings-list .settings-list-item .remove-item-button:active {
 547     background-position-x: -16px;
 548 }
 549
 550 .settings-list-item-columns {
 551     height: 100%;
 552 }
 553
 554 .settings-tab .settings-list .settings-list-item .list-column {
 555     displaY: -webkit-box;
 556     -webkit-box-align: center;
 557     padding-left: 5px;
 558     padding-right: 2px;
 559     box-sizing: border-box;
 560     overflow: hidden;
 561     text-overflow: ellipsis;
 562     height: 100%;
 563 }
 564
 565 .settings-tab .settings-list .settings-list-item .list-column .list-column-editor {
 566     width: 100%;
 567 }
 568
 569 .settings-tab .settings-list .settings-list-item.add-list-item .remove-item-button {
 570     visibility: hidden;
 571 }
 572
 573 .settings-tab .settings-list .settings-list-item.editable .list-column .list-column-editor {
 574     display: none;
 575 }
 576
 577 .settings-tab .settings-list .settings-list-item.editable.item-editing .list-column .list-column-editor {
 578     display: block;
 579 }
 580
 581 .settings-tab .settings-list .settings-list-item.editable.item-editing .list-column .list-column-text {
 582     display: none;
 583 }
 584
 585 .settings-tab .settings-list .settings-list-item.editable.item-editing .list-column .list-column-editor.editable-item-error {
 586     background-color: pink;
 587 }
 588
 589 .list-column-editor {
 590     border: 1px solid rgb(213, 213, 213);
 591     border-radius: 2px;
 592     color: #444444;
 593     padding: 3px;
 594 }
 595
 596 .settings-tab .settings-list .settings-list-item .file-system-path {
 597     white-space: nowrap;
 598     font-size: 12px;
 599     padding-left: 6px;
 600     padding-right: 5px;
 601     -webkit-box-flex: 1;
 602     color: hsl(210, 16%, 22%);
 603 }
 604
 605 .settings-tab .settings-list .settings-list-item .file-system-path-name {
 606     padding-right: 6px;
 607     font-weight: bold;
 608 }
 609
 610 .file-mappings-list .settings-list-item .list-column.settings-list-column-url {
 611     width: 50%;
 612 }
 613
 614 .file-mappings-list .settings-list-item .list-column.settings-list-column-path {
 615     width: 50%;
 616 }
 617
 618 .excluded-folders-list .settings-list-item .list-column.settings-list-column-path {
 619     width: 100%;
 620 }
 621
 622 .settings-dialog {
 623     border-radius: 3px;
 624     box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
 625     display: -webkit-flex;
 626     -webkit-flex-direction: column;
 627     background: white;
 628 }
 629
 630 .settings-dialog .dialog-contents {
 631     display: flex;
 632     flex-direction: column;
 633 }
 634
 635 .settings-dialog .header {
 636     flex: 0 0 auto;
 637     color: #333;
 638     font-size: 14px;
 639     margin: 0;
 640     padding: 14px 17px 14px;
 641 }
 642
 643 .settings-dialog .contents {
 644     flex: 1 1 auto;
 645     padding: 0 17px;
 646     overflow: auto;
 647 }
 648
 649 .settings-dialog .block-header {
 650     color: black;
 651     font-size: 1.2em;
 652     margin-bottom: 0.8em;
 653 }
 654
 655 .settings-dialog .done-button {
 656     float: right;
 657 }
 658
 659 .settings-glass-pane {
 660     -webkit-box-align: center;
 661     -webkit-box-orient: vertical;
 662     -webkit-box-pack: center;
 663     display: -webkit-box;
 664     z-index: 2000 !important;
 665     padding: 5px;
 666     background-color: rgba(255, 255, 255, 0.4) !important;
 667 }
 668
 669 .help-indent-labels label {
 670     padding-left: 10px;
 671 }
 672
 673 .help-field-note {
 674     opacity: 0.6;
 675     padding-left: 19px;
 676 }
 677
 678 .edit-file-system-dialog .section {
 679     min-width: 400px;
 680 }