third_party/WebKit/Source/devtools/front_end/emulation/devicesSettingsTab.css

   1 /*
   2  * Copyright 2015 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 .devices-settings-tab .settings-tab.help-content {
   8     display: flex;
   9     flex-direction: column;
  10     align-items: flex-start;
  11     height: 100%;
  12     margin: 0;
  13 }
  14
  15 .devices-settings-tab .devices-title {
  16     font-size: 120%;
  17     color: #222;
  18     flex: none;
  19 }
  20
  21 .devices-settings-tab .devices-button-row {
  22     flex: none;
  23     display: flex;
  24 }
  25
  26 .devices-settings-tab .devices-button-row button {
  27     margin-right: 10px;
  28     min-width: 120px;
  29     flex: none;
  30 }
  31
  32 .devices-settings-tab .devices-list {
  33     width: 350px;
  34     overflow-y: auto;
  35     margin: 10px 0;
  36     border: 1px solid rgb(231, 231, 231);
  37     flex: auto 0 1;
  38 }
  39
  40 .devices-settings-tab .devices-custom-separator {
  41     background: rgb(231, 231, 231);
  42     height: 1px;
  43 }
  44
  45 .devices-settings-tab .devices-list-item {
  46     padding: 3px 0 3px 10px;
  47     height: 30px;
  48     display: flex;
  49     align-items: center;
  50     cursor: pointer;
  51 }
  52
  53 .devices-settings-tab .devices-list-item:hover {
  54     background: hsl(0, 0%, 85%);
  55 }
  56
  57 .devices-settings-tab .devices-list-checkbox {
  58     height: 12px;
  59     width: 12px;
  60     margin: 3px 5px 2px 2px;
  61     flex: none;
  62     pointer-events: none;
  63 }
  64
  65 .devices-settings-tab .devices-list-title {
  66     overflow: hidden;
  67     white-space: nowrap;
  68     text-overflow: ellipsis;
  69     flex: auto;
  70     -webkit-user-select: none;
  71     color: #aaa;
  72 }
  73
  74 .devices-settings-tab .device-list-item-show .devices-list-title {
  75     color: #222;
  76 }
  77
  78 .devices-settings-tab .devices-list-remove,
  79 .devices-settings-tab .devices-list-edit {
  80     background-image: url(Images/toolbarButtonGlyphs.png);
  81     background-size: 352px 168px;
  82     width: 32px;
  83     height: 24px;
  84     opacity: 0.5;
  85     cursor: pointer;
  86     flex: none;
  87     visibility: hidden;
  88 }
  89
  90 .devices-settings-tab .devices-list:not(.devices-list-editing) .devices-list-item:hover .devices-list-remove,
  91 .devices-settings-tab .devices-list-item:hover .devices-list-edit {
  92     visibility: visible;
  93 }
  94
  95 .devices-settings-tab .devices-list-remove:hover,
  96 .devices-settings-tab .devices-list-edit:hover {
  97     opacity: 0.7;
  98 }
  99
 100 @media (-webkit-min-device-pixel-ratio: 1.5) {
 101 .devices-settings-tab .devices-list-remove,
 102 .devices-settings-tab .devices-list-edit {
 103     background-image: url(Images/toolbarButtonGlyphs_2x.png);
 104 }
 105 } /* media */
 106
 107 .devices-settings-tab .devices-list-remove {
 108     background-position: -128px -24px;
 109 }
 110
 111 .devices-settings-tab .devices-list-edit {
 112     background-position: -224px -72px;
 113 }
 114
 115 .devices-settings-tab .devices-edit-container {
 116     display: flex;
 117     flex-direction: row;
 118     align-items: flex-start;
 119     flex: none;
 120     padding: 10px 20px 0 10px;
 121     background: hsl(0, 0%, 95%);
 122 }
 123
 124 .devices-settings-tab .devices-edit-checkbox {
 125     height: 12px;
 126     width: 12px;
 127     margin: 3px 5px 2px 2px;
 128     flex: none;
 129     cursor: pointer;
 130 }
 131
 132 .devices-settings-tab .devices-edit-fields {
 133     flex: auto;
 134     display: flex;
 135     flex-direction: column;
 136     align-items: stretch;
 137 }
 138
 139 .devices-settings-tab .devices-edit-fields input {
 140     margin-right: 10px;
 141 }
 142
 143 .devices-settings-tab .devices-edit-fields input.error-input {
 144     outline: auto 2px red;
 145     background-color: white;
 146 }
 147
 148 .devices-settings-tab .devices-edit-fields > * {
 149     flex: none;
 150     margin-bottom: 10px;
 151 }
 152
 153 .devices-settings-tab .devices-edit-buttons > button {
 154     margin-right: 10px;
 155 }
 156