Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css

   1 /*
   2  * Copyright (C) 2017 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 .spreadsheet-css-declaration {
  27     margin: 0;
  28     padding: 0 0 var(--css-declaration-vertical-padding);
  29     font-family: Menlo, monospace;
  30     font-size: 11px;
  31     color: hsl(0, 0%, 70%);
  32     background: white;
  33     border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
  34     -webkit-user-select: text;
  35 }
  36
  37 .spreadsheet-css-declaration.selecting,
  38 .spreadsheet-css-declaration.selecting .spreadsheet-style-declaration-editor {
  39     -webkit-user-select: none;
  40 }
  41
  42 .spreadsheet-css-declaration :matches(.header, .header-media) {
  43     padding: 0 var(--css-declaration-horizontal-padding);
  44 }
  45
  46 .spreadsheet-css-declaration :matches(.header, .header-media):first-child {
  47     padding-top: var(--css-declaration-vertical-padding);
  48 }
  49
  50 .spreadsheet-css-declaration .header.editing-selector .origin {
  51     position: absolute;
  52     right: var(--css-declaration-horizontal-padding);
  53 }
  54
  55 .spreadsheet-css-declaration .media-label {
  56     color: var(--text-color);
  57 }
  58
  59 .spreadsheet-css-declaration .origin {
  60     float: right;
  61     max-width: 100%;
  62     font: 11px sans-serif;
  63     color: hsl(0, 0%, 50%);
  64     overflow: hidden;
  65     text-overflow: ellipsis;
  66     white-space: nowrap;
  67 }
  68
  69 .spreadsheet-css-declaration.locked .origin::after {
  70     display: inline-block;
  71     position: relative;
  72     top: 1px;
  73     width: 8px;
  74     height: 10px;
  75     margin-left: 4px;
  76     content: url(../Images/Locked.svg);
  77 }
  78
  79 .spreadsheet-css-declaration .origin .go-to-link {
  80     color: hsl(0, 0%, 50%);
  81 }
  82
  83 .spreadsheet-css-declaration .origin .go-to-link:hover {
  84     color: hsl(0, 0%, 33%);
  85 }
  86
  87 .spreadsheet-css-declaration .styles-source {
  88     float: right;
  89 }
  90
  91 .spreadsheet-css-declaration .selector {
  92     position: relative;
  93     z-index: 1;
  94 }
  95
  96 .spreadsheet-css-declaration .selector.style-attribute {
  97     font: 12px sans-serif;
  98     color: hsl(0, 0%, 30%);
  99     -webkit-user-modify: read-only;
 100 }
 101
 102 .spreadsheet-css-declaration .selector > span {
 103     color: hsl(0, 0%, 50%);
 104 }
 105
 106 .spreadsheet-css-declaration .selector:focus,
 107 .spreadsheet-css-declaration .selector > .matched {
 108     color: var(--text-color);
 109 }
 110
 111 .spreadsheet-css-declaration.locked {
 112     background-color: hsl(0, 0%, 97%)
 113 }
 114
 115 .spreadsheet-css-declaration .locked-icon {
 116     width: 8px;
 117     height: 10px;
 118     content: url(../Images/Locked.svg);
 119 }
 120
 121 .spreadsheet-css-declaration .selector.spreadsheet-selector-field {
 122     outline-offset: -3px;
 123 }
 124
 125 .spreadsheet-css-declaration .selector.spreadsheet-selector-field.editing {
 126     display: inline-block;
 127     box-shadow: hsla(0, 0%, 0%, 0.5) 0 1px 3px;
 128     outline: none !important;
 129 }
 130
 131 .spreadsheet-css-declaration .close-brace {
 132     display: inline-block;
 133     padding-left: var(--css-declaration-horizontal-padding);
 134 }
 135
 136 @media (prefers-color-scheme: dark) {
 137     .spreadsheet-css-declaration {
 138         background: var(--background-color-code);
 139         color: var(--text-color-tertiary);
 140         color: hsl(0, 0%, 30%);
 141         border-bottom-color: var(--text-color-quaternary);
 142     }
 143
 144     .spreadsheet-css-declaration.locked {
 145         background: var(--background-color);
 146     }
 147
 148     .spreadsheet-css-declaration .selector.style-attribute {
 149         color: var(--text-color-secondary);
 150     }
 151
 152     .spreadsheet-css-declaration.locked .origin::after {
 153         filter: var(--filter-invert);
 154     }
 155
 156     .spreadsheet-css-declaration .origin .go-to-link,
 157     .spreadsheet-css-declaration .origin .go-to-link:hover {
 158         color: var(--text-color-secondary);
 159     }
 160 }