Web Inspector: Make Console's Execution Context picker stand out when it is non-default
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / QuickConsole.css
1 /*
2  * Copyright (C) 2013 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 .quick-console {
27     position: relative;
28     min-height: var(--console-prompt-min-height);
29
30     display: flex;
31     align-items: flex-end;
32
33     background-color: white;
34     border-top: 1px solid var(--border-color);
35     padding: 3px 0 4px;
36
37     outline: none;
38     overflow: hidden;
39
40     font-family: Menlo, monospace;
41 }
42
43 .quick-console.showing-log {
44     border-top-color: hsl(0, 0%, 94%) !important;
45 }
46
47 .quick-console > .console-prompt {
48     display: flex;
49     flex: 1;
50
51     align-items: flex-start;
52
53     max-height: 150px;
54
55     overflow-y: auto;
56     overflow-x: hidden;
57     pointer-events: none;
58 }
59
60 .quick-console > .console-prompt::before {
61     position: relative;
62     z-index: 1;
63
64     top: 4px;
65     left: 4px;
66
67     margin-right: 2px;
68
69     width: 12px;
70     height: 12px;
71
72     content: url(../Images/UserInputPrompt.svg);
73 }
74
75 .quick-console > .console-prompt > .CodeMirror {
76     pointer-events: all;
77     margin: 4px 0 2px;
78 }
79
80 .quick-console > .navigation-bar {
81     background: transparent;
82     border: none;
83
84     height: 21px;
85 }
86
87 .quick-console .execution-context {
88     margin-top: -1px;
89 }
90
91 .quick-console > .navigation-bar > .hierarchical-path .execution-context {
92     -webkit-margin-end: 7px;
93 }
94
95 .quick-console > .navigation-bar > .hierarchical-path .execution-context .separator {
96     display: none;
97 }
98
99 .quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context {
100     background: var(--selected-background-color);
101     border-radius: 3px;
102     color: var(--selected-foreground-color);
103 }
104
105 .quick-console > .navigation-bar > .hierarchical-path.non-default-execution-context .execution-context .selector-arrows {
106     color: var(--selected-foreground-color);
107     opacity: 1;
108 }