Outline.css (3165B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ 4 5 6 .sources-panel .outline { 7 display: flex; 8 height: 100%; 9 } 10 11 .source-outline-panel { 12 flex: 1; 13 overflow: auto; 14 } 15 16 .outline { 17 overflow-y: hidden; 18 } 19 20 .outline > div { 21 width: 100%; 22 position: relative; 23 } 24 25 .outline-pane-info { 26 padding: 0.5em; 27 width: 100%; 28 font-style: italic; 29 text-align: center; 30 user-select: none; 31 font-size: 12px; 32 overflow: hidden; 33 } 34 35 .outline-list { 36 margin: 0; 37 padding: 4px 0; 38 position: absolute; 39 top: 25px; 40 bottom: 25px; 41 left: 0; 42 right: 0; 43 list-style-type: none; 44 overflow: auto; 45 } 46 47 .outline-list__class-list { 48 margin: 0; 49 padding: 0; 50 list-style: none; 51 } 52 53 .outline-list__class-list > .outline-list__element { 54 padding-inline-start: 2rem; 55 } 56 57 .outline-list__class-list .function-signature .function-name { 58 color: var(--theme-highlight-green); 59 } 60 61 .outline-list .function-signature .paren { 62 color: inherit; 63 } 64 65 .outline-list__class h2 { 66 font-weight: normal; 67 font-size: 1em; 68 padding: 3px 0; 69 padding-inline-start: 10px; 70 color: var(--blue-55); 71 margin: 0; 72 } 73 74 .outline-list__class:not(:first-child) h2 { 75 margin-top: 12px; 76 } 77 78 .outline-list h2:hover { 79 background: var(--theme-toolbar-background-hover); 80 } 81 82 .theme-dark .outline-list h2 { 83 color: var(--theme-highlight-blue); 84 } 85 86 .outline-list h2 .keyword { 87 color: var(--theme-highlight-red); 88 } 89 90 .outline-list__class h2.focused { 91 background: var(--theme-selection-background); 92 } 93 94 .outline-list__class h2.focused, 95 .outline-list__class h2.focused .keyword { 96 color: var(--theme-selection-color); 97 } 98 99 .outline-list__element { 100 padding: 3px 10px 3px 10px; 101 cursor: default; 102 white-space: nowrap; 103 } 104 105 .outline-list > .outline-list__element { 106 padding-inline-start: 1rem; 107 } 108 109 .outline-list__element-icon { 110 padding-inline-end: 0.4rem; 111 } 112 113 .outline-list__element:hover { 114 background: var(--theme-toolbar-background-hover); 115 } 116 117 .outline-list__element.focused { 118 background: var(--theme-selection-background); 119 } 120 121 .outline-list__element.focused .outline-list__element-icon, 122 .outline-list__element.focused .function-signature * { 123 color: var(--theme-selection-color); 124 } 125 126 .outline-footer { 127 display: flex; 128 box-sizing: border-box; 129 position: absolute; 130 bottom: 0; 131 left: 0; 132 right: 0; 133 height: 25px; 134 background: var(--theme-body-background); 135 border-top: 1px solid var(--theme-splitter-color); 136 opacity: 1; 137 z-index: 1; 138 user-select: none; 139 } 140 141 .outline-footer button { 142 color: var(--theme-body-color); 143 144 /* Since the buttons are on the bottom left edge, we need to adjust the outline so 145 it's not off-screen */ 146 outline-offset: -2px; 147 148 &.active { 149 background: var(--theme-selection-background); 150 color: var(--theme-selection-color); 151 152 &:focus-visible { 153 /* When the button is active, it has a similar background color than the outline color 154 so we put the focus box-shadow inside the element to make the focus indicator visible */ 155 box-shadow: inset var(--theme-outline-box-shadow); 156 } 157 } 158 }