DiscoveryStreamAdmin.scss (4338B)
1 /* stylelint-disable max-nesting-depth */ 2 3 .discoverystream-admin-toggle { 4 position: fixed; 5 // Adjust spacing for DevTools wrench icon to avoid overlapping the customize button 6 inset-block-end: calc(var(--button-size-icon) + var(--space-xxlarge) + var(--space-small)); 7 inset-inline-end: var(--space-xlarge); 8 border: 0; 9 background: none; 10 z-index: 4; 11 border-radius: var(--border-radius-small); 12 13 .icon-devtools { 14 background-color: var(--button-background-color, rgba(21, 20, 26, 7%)); 15 background-image: url('chrome://global/skin/icons/developer.svg'); 16 background-size: var(--icon-size-medium); 17 box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 20%); 18 padding: calc(5 * var(--space-xsmall)); 19 } 20 21 &:dir(rtl) { 22 transform: scaleX(-1); 23 } 24 25 &:hover { 26 background: var(--newtab-element-hover-color); 27 } 28 29 &.expanded { 30 background: $black-20; 31 } 32 } 33 34 .discoverystream-admin { 35 $monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 36 'Source Code Pro', monospace; 37 38 position: fixed; 39 inset-block-start: 0; 40 inset-inline-start: 0; 41 width: 100%; 42 background: var(--newtab-background-color); 43 height: 100%; 44 overflow-y: scroll; 45 margin: 0 auto; 46 color: var(--newtab-text-primary-color); 47 z-index: 3; 48 49 &.collapsed { 50 display: none; 51 } 52 53 h1 { 54 font-size: var(--font-size-xxlarge); 55 } 56 57 h2 .button, 58 p .button { 59 font-size: inherit; 60 padding: var(--space-xsmall) var(--space-medium); 61 margin-inline-start: var(--space-xsmall); 62 margin-block-end: 0; 63 } 64 65 .toggle-wrapper { 66 margin-block: var(--space-large); 67 width: 200px; 68 } 69 70 .details-section { 71 margin-block: var(--space-large); 72 73 summary { 74 font-size: var(--font-size-large); 75 } 76 } 77 78 table { 79 border-collapse: collapse; 80 width: 100%; 81 82 &.minimal-table { 83 border-collapse: collapse; 84 border: 1px solid var(--border-color); 85 86 td { 87 padding: var(--space-small); 88 } 89 90 td:first-child { 91 width: 1%; 92 white-space: nowrap; 93 } 94 95 td:not(:first-child) { 96 font-family: $monospace; 97 } 98 } 99 100 &.errorReporting { 101 tr { 102 border: 1px solid var(--newtab-background-color-secondary); 103 } 104 105 td { 106 padding: var(--space-xsmall); 107 108 &[rowspan] { 109 border: 1px solid var(--newtab-background-color-secondary); 110 } 111 } 112 } 113 } 114 115 .large-data-container { 116 max-height: 500px; 117 overflow-y: scroll; 118 } 119 120 .message-item { 121 &:first-child td { 122 border-block-start: 1px solid var(--border-color); 123 } 124 125 td { 126 vertical-align: top; 127 padding: var(--space-small); 128 border-block-end: 1px solid var(--border-color); 129 130 &.min { 131 width: 1%; 132 white-space: nowrap; 133 } 134 135 &.message-summary { 136 width: 60%; 137 } 138 139 &.button-column { 140 width: 15%; 141 } 142 143 &:first-child { 144 border-inline-start: 1px solid var(--border-color); 145 } 146 147 &:last-child { 148 border-inline-end: 1px solid var(--border-color); 149 } 150 } 151 152 &.blocked { 153 .message-id, 154 .message-summary { 155 opacity: 0.5; 156 } 157 158 .message-id { 159 opacity: 0.5; 160 } 161 } 162 163 .message-id { 164 font-family: $monospace; 165 font-size: var(--font-size-small); 166 } 167 } 168 169 pre { 170 background: var(--newtab-background-color-secondary); 171 margin: 0; 172 padding: var(--space-small); 173 font-size: var(--font-size-small); 174 max-width: 750px; 175 overflow: auto; 176 font-family: $monospace; 177 } 178 179 .helpLink { 180 padding: var(--space-medium); 181 display: flex; 182 background: $black-10; 183 border-radius: var(--border-radius-small); 184 align-items: center; 185 186 a { 187 text-decoration: underline; 188 } 189 190 .icon { 191 min-width: 18px; 192 min-height: 18px; 193 } 194 } 195 196 .ds-component { 197 margin-block-end: var(--space-large); 198 } 199 200 .collapsed { 201 display: none; 202 } 203 204 .icon { 205 display: inline-table; 206 width: 18px; 207 height: 18px; 208 } 209 210 .button { 211 &:disabled, 212 &:disabled:active { 213 opacity: 0.5; 214 cursor: unset; 215 box-shadow: none; 216 } 217 } 218 219 .weather-section { 220 margin-block-end: var(--space-xlarge); 221 222 form { 223 display: flex; 224 225 label { 226 margin-inline-end: var(--space-medium); 227 } 228 } 229 } 230 }