Web Inspector: New rule button in the style sidebar is blurry and too dark
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / VisualStyleCommaSeparatedKeywordEditor.css
1 /*
2  * Copyright (C) 2015 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .visual-style-property-container.comma-separated-keyword-editor {
27     margin-bottom: 5px;
28 }
29
30 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container {
31     border: 1px solid hsl(0, 0%, 83%);
32     overflow: auto;
33     font-size: 11px;
34 }
35
36 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list {
37     min-height: 51px;
38     max-height: 94px;
39     margin: 0;
40     padding: 0;
41     background-color: hsl(0, 0%, 95%);
42     overflow: auto;
43     outline: none;
44     list-style-type: none;
45 }
46
47 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item {
48     position: relative;
49     width: 100%;
50     height: 17px;
51     line-height: 17px;
52     overflow: hidden;
53 }
54
55 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item:nth-child(odd) {
56     background-color: white;
57 }
58
59 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.selected {
60     background-color: hsl(213, 92%, 55%) !important;
61     color: white;
62 }
63
64 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > :matches(button, img) {
65     display: none;
66 }
67
68 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles {
69     padding-left: 3px;
70 }
71
72 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item.selected:not(.editor-hidden) > .titles > * {
73     color: transparent;
74 }
75
76 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item > .visual-style-comma-separated-keyword-item-editor {
77     position: absolute;
78     top: 0;
79     right: 3px;
80     bottom: 0;
81     left: 3px;
82     margin: 0;
83     padding: 0;
84     line-height: 13px;
85     border: none;
86     background-color: transparent;
87     font-family: inherit;
88     color: white;
89     z-index: 1;
90 }
91
92 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item.editor-hidden > .visual-style-comma-separated-keyword-item-editor {
93     display: none;
94 }
95
96 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle {
97     font-size: 9px;
98     color: hsl(0, 0%, 83%);
99 }
100
101 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item:not(.no-value) > .titles > .subtitle {
102     display: none;
103 }
104
105 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-controls {
106     display: flex;
107     border-top: 1px solid hsl(0, 0%, 83%);
108 }
109
110 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-controls > div {
111     width: 20px;
112     height: 19px;
113     padding: 3px;
114     border-right: 1px solid hsl(0, 0%, 83%);
115     opacity: 0.7;
116 }
117
118 .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-controls > .visual-style-remove-comma-separated-keyword {
119     order: 2;
120 }