Source/WebInspectorUI/UserInterface/Views/Variables.css

   1 /*
   2  * Copyright (C) 2015-2016 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 :root {
  27     --z-index-highlight: 64;
  28     --z-index-header: 128;
  29     --z-index-resizer: 256;
  30     --z-index-popover: 512;
  31     --z-index-tooltip: 1024;
  32     --z-index-glass-pane-for-drag: 2048;
  33     --z-index-uncaught-exception-sheet: 4096;
  34
  35     --foreground-lightness: 0%;
  36
  37     --text-color: black;
  38     --text-color-active: black;
  39
  40     --text-color-secondary: hsl(0, 0%, 50%);
  41
  42     /* Disabled text/glyphs */
  43     --text-color-tertiary: hsl(0, 0%, 70%);
  44
  45     /* Dividers, separators, background fills */
  46     --text-color-quaternary: hsl(0, 0%, 85%);
  47
  48     --background-color: white;
  49
  50     --background-color-content: white;
  51     --background-color-code: white;
  52
  53     --selected-foreground-color: white;
  54     --selected-secondary-text-color: hsla(0, 100%, 100%, 0.7);
  55     --selected-background-color: hsl(212, 92%, 54%);
  56     --selected-background-color-unfocused: hsl(0, 0%, 83%);
  57     --selected-background-color-active: hsl(218, 85%, 52%);
  58     --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
  59     --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
  60
  61     --glyph-color: hsl(0, 0%, 30%);
  62     --glyph-color-pressed: hsl(0, 0%, 15%);
  63     --glyph-color-disabled: hsla(0, 0%, 30%, 0.55);
  64     --glyph-color-active: hsl(212, 92%, 54%);
  65     --glyph-color-active-pressed: hsl(218, 85%, 52%);
  66
  67     --border-color: hsl(0, 0%, 70%);
  68     --border-color-dark: hsl(0, 0%, 57%);
  69
  70     --button-background-color: white;
  71     --button-background-color-hover: hsl(0, 0%, 88%);
  72     --button-background-color-pressed: hsl(0, 0%, 85%);
  73
  74     --panel-background-color: hsl(0, 0%, 93%);
  75     --panel-background-color-light: hsl(0, 0%, 96%);
  76
  77     --warning-background-color: hsl(43, 97%, 84%);
  78     --warning-background-color-secondary: hsl(51, 87%, 93%);
  79     --error-background-color: hsl(11, 100%, 80%);
  80     --error-background-color-secondary: hsl(15, 100%, 90%);
  81
  82     --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
  83     --console-prompt-min-height: 30px;
  84
  85     --message-text-view-font-size: 16px;
  86     --message-text-view-large-font-size: 28px;
  87
  88     --text-color-gray-dark: hsl(0, 0%, 20%);
  89     --text-color-gray-medium: hsl(0, 0%, 52%);
  90     --error-text-color: hsl(0, 86%, 47%);
  91
  92     --value-changed-highlight: hsla(83, 100%, 48%, 0.4);
  93
  94     --breakpoint-fill-color: hsl(212, 45%, 54%);
  95     --breakpoint-stroke-color: hsl(212, 45%, 48%);
  96     --breakpoint-disabled-fill-color: hsl(212, 40%, 84%);
  97     --breakpoint-disabled-stroke-color: hsl(212, 40%, 78%);
  98     --breakpoint-unresolved-fill-color: hsl(0, 0%, 60%);
  99     --breakpoint-unresolved-stroke-color: hsl(0, 0%, 54%);
 100     --breakpoint-unresolved-disabled-fill-color: hsl(0, 0%, 84%);
 101     --breakpoint-unresolved-disabled-stroke-color: hsl(0, 0%, 78%);
 102
 103     --syntax-highlight-number-color: hsl(248, 100%, 40%);
 104     --syntax-highlight-boolean-color: hsl(309, 85%, 35%);
 105     --syntax-highlight-string-color: hsl(1, 79%, 42%);
 106     --syntax-highlight-link-color: hsl(240, 100%, 52%);
 107     --syntax-highlight-regexp-color: hsl(20, 100%, 44%);
 108     --syntax-highlight-symbol-color: hsl(172, 45%, 45%);
 109     --syntax-highlight-comment-color: hsl(119, 100%, 22%);
 110
 111     --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
 112
 113     --timeline-marker-z-index: 4;
 114     --timeline-record-z-index: 8;
 115     --timeline-selection-z-index: 16;
 116
 117     --memory-javascript-fill-color: hsl(269, 65%, 75%);
 118     --memory-javascript-stroke-color: hsl(269, 33%, 50%);
 119     --memory-images-fill-color: hsl(0, 65%, 75%);
 120     --memory-images-stroke-color: hsl(0, 54%, 50%);
 121     --memory-layers-fill-color: hsl(76, 49%, 75%);
 122     --memory-layers-stroke-color: hsl(79, 45%, 50%);
 123     --memory-page-fill-color: hsl(22, 60%, 70%);
 124     --memory-page-stroke-color: hsl(22, 40%, 50%);
 125     --memory-max-comparison-fill-color: hsl(220, 10%, 75%);
 126     --memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
 127
 128     --cpu-stroke-color: hsl(118, 33%, 42%);
 129     --cpu-fill-color: hsl(118, 43%, 55%);
 130
 131     --network-header-color: hsl(204, 52%, 55%);
 132     --network-system-color: hsl(79, 32%, 50%);
 133     --network-pseudo-header-color: hsl(312, 35%, 51%);
 134     --network-error-color: hsl(0, 54%, 50%);
 135
 136     --network-redirect-color: lightgrey;
 137     --network-queue-color: hsl(0, 0%, 54%);
 138     --network-dns-color: hsl(265, 82%, 60%);
 139     --network-connect-color: hsl(46, 92%, 62%);
 140     --network-secure-color: hsl(352, 81%, 59%);
 141     --network-request-color: hsl(118, 56%, 65%);
 142     --network-response-color: hsl(202, 61%, 59%);
 143
 144     --even-zebra-stripe-row-background-color: white;
 145     --odd-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
 146     --transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03)) top left / 100% 40px;
 147
 148     --toolbar-height: 36px;
 149     --tab-bar-height: 24px;
 150     --navigation-bar-height: 29px;
 151
 152     --slider-height: 11px;
 153
 154     --css-declaration-vertical-padding: 4px;
 155     --css-declaration-horizontal-padding: 6px;
 156 }
 157
 158 body.window-inactive {
 159     /* FIXME: Use CSS4 color blend functions once they're available. */
 160     --selected-background-color: hsla(212, 92%, 54%, 0.5);
 161
 162     --glyph-color-active: hsla(212, 92%, 54%, 0.5);
 163     --glyph-color: hsla(0, 0%, 30%, 0.65);
 164     --glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
 165 }
 166
 167 body.window-inactive * {
 168     --border-color: hsl(0, 0%, 85%);
 169     --border-color-dark: hsl(0, 0%, 72%);
 170 }
 171
 172 @media (prefers-color-scheme: dark) {
 173
 174     :root {
 175         color: var(--text-color);
 176
 177         --foreground-lightness: 100%;
 178
 179         --text-color: hsl(0, 0%, 88%);
 180         --text-color-active: white;
 181         --text-color-secondary: hsl(0, 0%, 65%);
 182
 183         /* Disabled text/glyphs */
 184         --text-color-tertiary: hsl(0, 0%, 50%);
 185
 186         /* Dividers, separators, background fills */
 187         --text-color-quaternary: hsl(0, 0%, 33%);
 188
 189         /* Deprecated */
 190         --text-color-gray-dark: hsl(0, 0%, 75%);
 191         --text-color-gray-medium: var(--text-color-secondary);
 192
 193         --background-color: hsl(0, 0%, 24%);
 194         --background-color-secondary: hsl(0, 0%, 27%);
 195         --background-color-tertiary: hsl(0, 0%, 31%);
 196
 197         --background-color-content: hsl(0, 0%, 21%);
 198         --background-color-code: hsl(0, 0%, 21%);
 199
 200         --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
 201         --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
 202
 203         --color-button: hsl(0, 0%, 99%);
 204         --color-button-active: var(--text-color-active);
 205
 206         --selected-foreground-color: var(--text-color-active);
 207         --selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
 208         --selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
 209         --selected-background-color: hsl(219, 80%, 43%);
 210         --selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
 211         --selected-background-color-active: hsl(218, 85%, 62%);
 212         --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
 213         --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
 214
 215         --glyph-color: hsl(0, 0%, 80%);
 216         --glyph-color-pressed: hsl(0, 0%, 100%);
 217         --glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
 218         --glyph-color-active: hsl(212, 100%, 71%);
 219         --glyph-color-active-pressed: hsl(212, 92%, 74%);
 220         --glyph-color-inactive: hsl(0, 0%, 36%);
 221
 222         --border-color: hsl(0, 0%, 33%);
 223         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
 224
 225         --border-color-secondary: hsl(0, 0%, 27%);
 226
 227         --button-background-color: hsl(0, 0%, 43%);
 228         --button-background-color-hover: var(--button-background-color);
 229         --button-background-color-pressed: hsl(0, 0%, 55%);
 230         --button-background-color-inactive: hsl(0, 0%, 28%);
 231
 232         --dashboard-background-color: hsl(0, 0%, 36%);
 233
 234         --panel-background-color: hsl(0, 0%, 24%);
 235         --panel-background-color-light: hsl(0, 0%, 29%);
 236
 237         --error-text-color: hsl(0, 86%, 65%);
 238
 239         --green-highlight-background-color: hsl(120, 15%, 28%);
 240         --green-highlight-text-color: hsl(80, 75%, 80%);
 241
 242         --yellow-highlight-background-color: hsl(13, 20%, 26%);
 243         --yellow-highlight-text-color: hsl(50, 96%, 87%);
 244
 245         --value-changed-highlight: var(--green-highlight-background-color);
 246         --value-visual-highlight: var(--yellow-highlight-background-color);
 247
 248         --syntax-highlight-number-color: hsl(276, 100%, 85%);
 249         --syntax-highlight-boolean-color: hsl(299, 71%, 80%);
 250         --syntax-highlight-string-color: hsl(28, 84%, 63%);
 251         --syntax-highlight-link-color: hsl(223, 100%, 77%);
 252         --syntax-highlight-regexp-color: hsl(20, 100%, 64%);
 253         --syntax-highlight-symbol-color: hsl(172, 45%, 65%);
 254         --syntax-highlight-comment-color: hsl(119, 40%, 72%);
 255         --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
 256
 257         --console-secondary-text-color: hsla(0, 0%, 100%, 0.45);
 258
 259         --warning-background-color: hsl(43, 100%, 23%);
 260         --warning-background-color-secondary: hsl(21, 18%, 25%);
 261         --error-background-color: hsl(11, 70%, 32%);
 262         --error-background-color-secondary: hsl(6, 23%, 25%);
 263
 264         --memory-max-comparison-fill-color: hsl(225, 5%, 45%);
 265         --memory-max-comparison-stroke-color: hsl(225, 5%, 65%);
 266
 267         --network-header-color: hsl(204, 52%, 55%);
 268         --network-system-color: hsl(79, 95%, 50%);
 269         --network-pseudo-header-color: hsl(312, 55%, 61%);
 270         --network-error-color: hsl(0, 54%, 55%);
 271
 272         --even-zebra-stripe-row-background-color: var(--background-color);
 273         --odd-zebra-stripe-row-background-color: var(--background-color-secondary);
 274         --transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 100%, 0.03) 50%, hsla(0, 0%, 100%, 0.03)) top left / 100% 40px;
 275
 276         --search-highlight-text-color: hsl(60, 100%, 50%);
 277         --search-highlight-text-color-active: hsl(0, 0%, 0%);
 278         --search-highlight-background-color: hsla(53, 83%, 53%, 0.2);
 279         --search-highlight-background-color-active: hsl(60, 100%, 50%);
 280         --search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
 281
 282         /* Invert colors yet preserve the hue */
 283         --filter-invert: invert(100%) hue-rotate(180deg);
 284
 285         /* TODO: Use the same variable for the default theme */
 286         --overlay-background: hsla(0, 0%, 24%, 0.9);
 287
 288         --console-message-separator: var(--text-color-quaternary);
 289     }
 290
 291     body.window-inactive {
 292         --selected-background-color: hsla(212, 92%, 64%, 0.5);
 293
 294         --glyph-color-active: var(--selected-background-color);
 295         --glyph-color: hsl(0, 0%, 52%);
 296         --glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
 297     }
 298
 299     body.window-inactive * {
 300         /* These properties are duplicated so that they have higher specificity than WebKit's stylesheet.
 301         Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
 302         When merging to open source, we should guard the existing .window-inactive style with
 303         '@media not all' to avoid applying the definition too broadly. */
 304         --border-color: hsl(0, 0%, 33%);
 305         --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
 306     }
 307 }