third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

   1 /*
   2  * Copyright (c) 2014 The Chromium Authors. All rights reserved.
   3  * Use of this source code is governed by a BSD-style license that can be
   4  * found in the LICENSE file.
   5  */
   6
   7 :host {
   8     flex: none;
   9     padding: 0 2px;
  10 }
  11
  12 .toolbar-shadow {
  13     position: relative;
  14     white-space: nowrap;
  15     height: 26px;
  16     overflow: hidden;
  17     z-index: 12;
  18     display: flex;
  19     flex: none;
  20     align-items: center;
  21 }
  22
  23 .toolbar-shadow.vertical {
  24     flex-direction: column;
  25     height: auto;
  26     width: 26px;
  27 }
  28
  29 .toolbar-shadow.floating {
  30     flex-direction: column;
  31     height: auto;
  32     background-color: white;
  33     border: 1px solid #ccc;
  34     margin-top: -1px;
  35     width: 26px;
  36     left: -2px;
  37 }
  38
  39 .toolbar-item {
  40     position: relative;
  41     display: flex;
  42     background-color: transparent;
  43     flex: none;
  44     align-items: center;
  45     justify-content: center;
  46     padding: 0;
  47     height: 26px;
  48     border: none;
  49     color: #5a5a5a;
  50 }
  51
  52 .toolbar-text {
  53     white-space: nowrap;
  54     overflow: hidden;
  55     margin-left: 6px;
  56 }
  57
  58 .toolbar-item:active {
  59     position: relative;
  60     z-index: 200;
  61 }
  62
  63 .toolbar-item.hover .toolbar-button-text {
  64     color: #333;
  65 }
  66
  67 .toolbar-item .toolbar-button-text {
  68     font-weight: bold;
  69     color: #5a5a5a;
  70 }
  71
  72 .long-click-glyph {
  73     background-color: #595959;
  74     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
  75     -webkit-mask-position: -288px -48px;
  76     -webkit-mask-size: 352px 168px;
  77     z-index: 1;
  78     width: 32px;
  79     height: 26px;
  80 }
  81
  82 @media (-webkit-min-device-pixel-ratio: 1.5) {
  83 .long-click-glyph {
  84     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
  85 }
  86 } /* media */
  87
  88 button.toolbar-item {
  89     width: 28px;
  90 }
  91
  92 button.toolbar-item.toggled-on .glyph {
  93     background-color: rgb(66, 129, 235) !important;
  94 }
  95
  96 button.toolbar-item:enabled.hover .glyph {
  97     background-color: #333;
  98 }
  99
 100 .blue-on-hover .toolbar-item:not(.toggled-on):enabled.hover {
 101     background-color: rgb(66, 129, 235);
 102 }
 103
 104 .blue-on-hover .toolbar-item:not(.toggled-on):enabled.hover .glyph {
 105     background-color: white;
 106 }
 107
 108 .toolbar-counter.hover,
 109 .toolbar-item.checkbox.hover {
 110     color: #333;
 111 }
 112
 113 :not(.blue-on-hover) button.toolbar-item:active .glyph {
 114     background-color: #5a5a5a !important;
 115 }
 116
 117 button.toolbar-item:disabled {
 118     background-position: 0 0 !important;
 119 }
 120
 121 button.toolbar-item:disabled .glyph {
 122     opacity: 0.5 !important;
 123 }
 124
 125 button.toolbar-item.extension {
 126     background-image: none;
 127 }
 128
 129 .toolbar-select-container {
 130     display: inline-flex;
 131     flex-shrink: 0;
 132     margin-right: 6px;
 133 }
 134
 135 .toolbar-select-arrow {
 136     background-image: url(Images/toolbarButtonGlyphs.png);
 137     background-size: 352px 168px;
 138     opacity: 0.7;
 139     width: 12px;
 140     height: 12px;
 141     background-position: -18px -96px;
 142     display: inline-block;
 143     pointer-events: none;
 144     margin: auto 0;
 145 }
 146
 147 @media (-webkit-min-device-pixel-ratio: 1.5) {
 148 .toolbar-select-arrow {
 149     background-image: url(Images/toolbarButtonGlyphs_2x.png);
 150 }
 151 } /* media */
 152
 153 input.toolbar-item {
 154     width: 200px;
 155     height: 20px;
 156     padding: 3px;
 157     margin: 1px 3px;
 158     background-color: white;
 159     border: solid 1px rgb(216, 216, 216);
 160 }
 161
 162 input.toolbar-item:focus,
 163 input.toolbar-item.hover {
 164     border: solid 1px rgb(202, 202, 202);
 165 }
 166
 167 select.toolbar-item {
 168     min-width: 48px;
 169     color: rgb(48, 48, 48);
 170     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 171     -webkit-appearance: none;
 172     border: 0;
 173     border-radius: 0;
 174     padding: 0 15px 0 5px;
 175     margin-right: -10px;
 176     position: relative;
 177 }
 178
 179 .toolbar-item.checkbox {
 180     padding: 0 5px 0 2px;
 181 }
 182
 183 .toolbar-item > .glyph {
 184     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
 185     -webkit-mask-size: 352px 168px;
 186     background-color: #5a5a5a;
 187     z-index: 1;
 188     width: 32px;
 189     height: 24px;
 190 }
 191
 192 .toolbar-item > .glyph {
 193     position: relative;
 194     left: -3px;
 195 }
 196
 197 .toolbar-item > .long-click-glyph {
 198     left: -5px;
 199 }
 200
 201 @media (-webkit-min-device-pixel-ratio: 1.5) {
 202 .toolbar-item > .glyph {
 203     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 204 }
 205 } /* media */
 206
 207 .toolbar-item.emulate-active {
 208     background-color: rgb(163, 163, 163);
 209 }
 210
 211 .toolbar-counter {
 212     cursor: pointer;
 213     padding: 0 2px;
 214     min-width: 26px;
 215 }
 216
 217 .toolbar-counter-item {
 218     margin-left: 6px;
 219 }
 220
 221 .toolbar-counter-item label {
 222     cursor: inherit;
 223 }
 224
 225 .toolbar-counter-item.toolbar-counter-item-first {
 226     margin-left: 0;
 227 }
 228
 229 .toolbar-counter-item > div {
 230     margin-right: 2px;
 231 }
 232
 233 .toolbar-divider {
 234     background-color: #ccc;
 235     width: 1px;
 236     margin: 2px 4px;
 237     height: 17px;
 238 }
 239
 240 .toolbar-group-label {
 241     margin-left: 5px;
 242     margin-right: 3px;
 243     color: #888;
 244 }
 245
 246 /* Predefined items */
 247
 248 .dock-toolbar-item.toggled-undocked .glyph,
 249 .dock-toolbar-item-undock .glyph {
 250     -webkit-mask-position: 0 -48px;
 251 }
 252
 253 .dock-toolbar-item.toggled-bottom .glyph,
 254 .dock-toolbar-item-bottom .glyph {
 255     -webkit-mask-position: -32px -24px;
 256 }
 257
 258 .dock-toolbar-item.toggled-right .glyph,
 259 .dock-toolbar-item-right .glyph {
 260     -webkit-mask-position: -256px -48px;
 261 }
 262
 263 .dock-toolbar-item.toggled-left .glyph {
 264     -webkit-mask-position: -32px -120px;
 265 }
 266
 267 .settings-toolbar-item .glyph {
 268     -webkit-mask-position: -160px -24px;
 269 }
 270
 271 .menu-toolbar-item .glyph {
 272     -webkit-mask-position: -192px -24px;
 273 }
 274
 275 .node-search-toolbar-item .glyph {
 276     -webkit-mask-position: -320px -120px;
 277 }
 278
 279 .emulation-toolbar-item .glyph {
 280     -webkit-mask-position: -160px 0;
 281 }
 282
 283 .emulation-toolbar-item.warning::after {
 284     background-image: url(Images/toolbarButtonGlyphs.png);
 285     background-size: 352px 168px;
 286     width: 10px;
 287     height: 12px;
 288     content: "";
 289     position: absolute;
 290     right: 3px;
 291     bottom: 2px;
 292     background-position: -202px -107px;
 293     z-index: 1;
 294 }
 295
 296 @media (-webkit-min-device-pixel-ratio: 1.5) {
 297 .emulation-toolbar-item.warning::before {
 298     background-image: url(Images/toolbarButtonGlyphs_2x.png);
 299 }
 300 } /* media */
 301
 302 .delete-toolbar-item .glyph {
 303     -webkit-mask-position: -128px 0;
 304 }
 305
 306 .clear-toolbar-item .glyph {
 307     -webkit-mask-position: -64px 0;
 308 }
 309
 310 .refresh-toolbar-item .glyph {
 311     -webkit-mask-position: 0 0;
 312 }
 313
 314 .visibility-toolbar-item .glyph {
 315     -webkit-mask-position: -96px 0;
 316 }
 317
 318 .visibility-off-toolbar-item .glyph {
 319     -webkit-mask-position: -192px 0;
 320 }
 321
 322 .large-list-toolbar-item .glyph {
 323     -webkit-mask-position: -224px 0;
 324 }
 325
 326 .edit-toolbar-item .glyph {
 327     -webkit-mask-position: -224px -72px;
 328 }
 329
 330 .screencast-toolbar-item .glyph {
 331     -webkit-mask-position: -160px 0;
 332 }
 333
 334 .record-toolbar-item .glyph {
 335     -webkit-mask-position: -288px 0;
 336 }
 337
 338 button.record-toolbar-item.toggled-on .glyph {
 339     -webkit-mask-position: -288px -24px;
 340     background-color: rgb(216, 0, 0) !important;
 341 }
 342
 343 .camera-toolbar-item .glyph {
 344     -webkit-mask-position: -96px -24px;
 345 }
 346
 347 .last-step-toolbar-item .glyph {
 348     -webkit-mask-position: 0 -72px;
 349 }
 350
 351 .first-step-toolbar-item .glyph {
 352     -webkit-mask-position: 0 -72px;
 353     transform: rotate(180deg);
 354     top: 0;
 355     bottom: 0;
 356 }
 357
 358 .step-in-toolbar-item .glyph {
 359     -webkit-mask-position: -64px -72px;
 360 }
 361
 362 .step-out-toolbar-item .glyph {
 363     -webkit-mask-position: -96px -72px;
 364 }
 365
 366 .step-over-toolbar-item .glyph {
 367     -webkit-mask-position: -128px -72px;
 368 }
 369
 370 .step-backwards-toolbar-item .glyph {
 371     -webkit-mask-position: -128px -72px;
 372     transform: scaleX(-1);
 373 }
 374
 375 .play-toolbar-item .glyph {
 376     -webkit-mask-position: -64px -48px;
 377 }
 378
 379 .play-backwards-toolbar-item .glyph {
 380     -webkit-mask-position: -64px -48px;
 381     transform: scaleX(-1);
 382 }
 383
 384 .pause-on-exceptions-toolbar-item .glyph {
 385     -webkit-mask-position: -256px 0;
 386 }
 387
 388 .pause-on-exceptions-toolbar-item.toggled-on .glyph {
 389     background-color: rgb(66, 129, 235);
 390 }
 391
 392 .pause-toolbar-item .glyph {
 393     -webkit-mask-position: -32px -72px;
 394 }
 395
 396 .pause-toolbar-item.toggled-on .glyph {
 397     -webkit-mask-position: 0 -72px;
 398 }
 399
 400 .breakpoint-toolbar-item.toggled-on .glyph {
 401     -webkit-mask-position: -32px 0;
 402 }
 403
 404 .add-breakpoint-toolbar-item .glyph {
 405     -webkit-mask-position: -64px -24px;
 406 }
 407
 408 .breakpoint-toolbar-item .glyph {
 409     -webkit-mask-position: 0 -24px;
 410 }
 411
 412 .format-toolbar-item .glyph {
 413     -webkit-mask-position: -256px -24px;
 414 }
 415
 416 .format-toolbar-item.toggled .glyph {
 417     background-color: rgb(66, 129, 235);
 418 }
 419
 420 .garbage-collect-toolbar-item .glyph {
 421     -webkit-mask-position: -128px -24px;
 422 }
 423
 424 .histogram-toolbar-item .glyph {
 425     -webkit-mask-position: -160px -48px;
 426 }
 427
 428 .flame-chart-toolbar-item .glyph {
 429     -webkit-mask-position: -192px -48px;
 430 }
 431
 432 .filter-toolbar-item > .glyph {
 433     -webkit-mask-position: -32px -48px;
 434 }
 435
 436 .filter-toolbar-item.toggled-shown .glyph {
 437     background-color: rgb(66, 129, 235) !important;
 438 }
 439
 440 .filter-toolbar-item.toggled-shown {
 441     background-color: #f3f3f3;
 442 }
 443
 444 .filter-toolbar-item.toggled-active .glyph {
 445     background-color: rgb(216, 0, 0) !important;
 446 }
 447
 448 .waterfall-toolbar-item .glyph {
 449     -webkit-mask-position: -128px -48px;
 450 }
 451
 452 .pan-toolbar-item .glyph {
 453     -webkit-mask-position: -98px -120px;
 454 }
 455
 456 .center-toolbar-item .glyph {
 457     -webkit-mask-position: -128px -120px;
 458 }
 459
 460 .rotate-toolbar-item .glyph {
 461     -webkit-mask-position: -160px -120px;
 462 }
 463
 464 .pin-toolbar-item .glyph {
 465     -webkit-mask-position: -256px -120px;
 466 }
 467
 468 :host(.toolbar-gray-toggled) .pin-toolbar-item.toggled-on,
 469 :host(.toolbar-gray-toggled) .animation-toolbar-item.toggled-on {
 470     background-color: #f3f3f3;
 471 }
 472
 473 .animation-toolbar-item .glyph {
 474     -webkit-mask-position: -192px -120px;
 475 }
 476
 477 .eyedropper-toolbar-item .glyph {
 478     -webkit-mask-position: -288px -120px;
 479 }
 480
 481 .add-toolbar-item .glyph {
 482     -webkit-mask-position: -224px -120px;
 483 }
 484
 485 .pause-outline-toolbar-item .glyph {
 486     -webkit-mask-position: -320px 0px;
 487 }
 488
 489 .replay-outline-toolbar-item .glyph {
 490     -webkit-mask-position: -320px -24px;
 491 }
 492
 493 .play-outline-toolbar-item .glyph {
 494     -webkit-mask-position: -320px -48px;
 495 }
 496
 497 .timer-toolbar-item .glyph {
 498     -webkit-mask-position: -320px -72px;
 499 }
 500
 501 .view-quilt-toolbar-item .glyph {
 502     -webkit-mask-position: -320px -96px;
 503 }
 504
 505 .case-sensitive-search-toolbar-item.toggled-on .toolbar-button-text {
 506     color: rgb(94, 146, 233);
 507 }
 508
 509 .regex-search-toolbar-item.toggled-on {
 510     color: rgb(66, 129, 235);
 511 }
 512
 513 .regex-search-toolbar-item.toggled-on .toolbar-button-text {
 514     color: rgb(94, 146, 233);
 515 }
 516
 517 .playback-rate-button.toggled-on > .toolbar-button-text {
 518     color: rgb(66, 129, 235);
 519 }
 520
 521 button.playback-rate-button {
 522     width: auto;
 523     margin-right: 10px;
 524 }
 525
 526 .layout-editor-toolbar-item .glyph {
 527     -webkit-mask-position: 0 -144px;
 528 }
 529
 530 .block-toolbar-item .glyph {
 531     -webkit-mask-position: -32px -144px;
 532 }
 533
 534 .block-toolbar-item.toggled-active .glyph {
 535     background-color: rgb(216, 0, 0) !important;
 536 }
 537