Web Inspector: Settings: experimental setting editors are misaligned in other locales
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / SettingsTabContentView.css
1 /*
2  * Copyright (C) 2016 Devin Rousso <webkit@devinrousso.com>. All rights reserved.
3  * Copyright (C) 2016 Apple Inc. All rights reserved.
4  *
5  * Redistribution and use in source and binary forms, with or without
6  * modification, are permitted provided that the following conditions
7  * are met:
8  * 1. Redistributions of source code must retain the above copyright
9  *    notice, this list of conditions and the following disclaimer.
10  * 2. Redistributions in binary form must reproduce the above copyright
11  *    notice, this list of conditions and the following disclaimer in the
12  *    documentation and/or other materials provided with the distribution.
13  *
14  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
15  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
16  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
17  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
18  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
19  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
20  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
21  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
22  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
23  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
24  * THE POSSIBILITY OF SUCH DAMAGE.
25  */
26
27 .content-view.settings {
28     padding-bottom: 6vh;
29     overflow-y: auto;
30 }
31
32 .content-view.settings .navigation-bar {
33     position: -webkit-sticky;
34     top: 0;
35     z-index: 1;
36     background-color: white;
37 }
38
39 .content-view.settings .navigation-bar.invisible {
40     visibility: hidden;
41 }
42
43 .content-view.settings .navigation-bar .item.radio.button.text-only {
44     color: inherit;
45     background-color: inherit;
46 }
47
48 .content-view.settings .navigation-bar .item.radio.button.text-only.selected {
49     color: var(--selected-background-color)
50 }
51
52 .content-view.settings > .settings-view > .separator {
53     height: 1em;
54 }
55
56 .content-view.settings > .settings-view > .container {
57     display: flex;
58     align-items: center;
59     margin-top: 1em;
60     font-size: 13px;
61 }
62
63 .content-view.settings > .settings-view > .container.hidden {
64     display: none;
65 }
66
67 .content-view.settings > .settings-view > .container-centered {
68     display: block;
69     text-align: center;
70 }
71
72 .content-view.settings > .settings-view > .container button {
73     -webkit-margin-end: 4px;
74     font-size: inherit;
75 }
76
77 .content-view.settings > .settings-view > .container > .title {
78     width: 50%;
79     -webkit-margin-end: 6px;
80     text-align: end;
81 }
82
83 .content-view.settings > .settings-view > .container > .editor-group {
84     display: flex;
85     flex-direction: column;
86 }
87
88 .content-view.settings > .settings-view > .container > .editor-group > .editor input {
89     font-size: inherit;
90 }
91
92 .content-view.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"] {
93     -webkit-margin-end: 4px;
94     /* Vertically align <select> with the group title text. */
95     font-size: 16px;
96 }
97
98 .content-view.settings > .settings-view > .container > .editor-group > .editor select {
99     /*
100     To set the font-size of <select> to be exactly 13px, it needs to be set to 16px.
101     Setting the font-size to 13px actually sets it to 11px.
102     */
103     font-size: 16px;
104
105     /* Vertically align <select> with the group title text. */
106     margin-top: 0;
107 }
108
109 .content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
110     /* Vertically align <input> with the group title text. */
111     margin-top: -1px;
112
113     max-width: 48px;
114     text-align: end;
115
116     --settings-input-number-margin-start: 2px;
117     --settings-input-number-margin-end: 5px;
118 }
119
120 body[dir=ltr] .content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
121     margin-left: var(--settings-input-number-margin-start);
122     margin-right: var(--settings-input-number-margin-end);
123 }
124
125 body[dir=rtl] .content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
126     margin-left: var(--settings-input-number-margin-end);
127     margin-right: var(--settings-input-number-margin-start);
128 }
129
130 @media (prefers-dark-interface) {
131     .content-view.settings .navigation-bar {
132         background-color: var(--background-color-content);
133     }
134
135     .content-view.settings .navigation-bar .item.radio.button.text-only.selected {
136         color: var(--glyph-color-active);
137     }
138 }