newTab.css (6307B)
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 :root { 6 -moz-appearance: none; 7 font-size: 75%; 8 background-color: transparent; 9 } 10 11 /* SCROLLBOX */ 12 #newtab-vertical-margin { 13 background-color: #181411; 14 background-attachment: fixed; 15 } 16 17 /* UNDO */ 18 #newtab-undo-container { 19 padding: 4px 3px; 20 border: 1px solid; 21 border-color: rgb(64,64,64); 22 background-color: #181411; 23 color: #bfbbb6; 24 } 25 26 #newtab-undo-label { 27 margin-top: 0; 28 margin-bottom: 0; 29 } 30 31 .newtab-undo-button { 32 -moz-appearance: none; 33 color: #bfbbb6; 34 cursor: pointer; 35 padding: 0; 36 margin: 0 4px; 37 border: 0; 38 background: transparent; 39 text-decoration: underline; 40 min-width: 0; 41 } 42 43 .newtab-undo-button:hover { 44 color: rgb(255,255,255); 45 } 46 47 .newtab-undo-button:-moz-focusring { 48 outline: 1px dotted rgb(64,64,64); 49 } 50 51 #newtab-undo-close-button { 52 -moz-appearance: none; 53 padding: 0; 54 border: none; 55 } 56 57 #newtab-undo-close-button { 58 -moz-appearance: none; 59 padding: 0; 60 border: none; 61 height: 16px; 62 width: 16px; 63 float: right; 64 right: 0; 65 background-image: url(chrome://global/skin/icons/close.svg#normal); 66 background-color: transparent; 67 } 68 69 #newtab-undo-close-button:hover { 70 background-image: url(chrome://global/skin/icons/close.svg#hover); 71 } 72 73 #newtab-undo-close-button:hover:active { 74 background-image: url(chrome://global/skin/icons/close.svg#active); 75 } 76 77 /* TOGGLE */ 78 #newtab-toggle { 79 background-color: transparent; 80 background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0); 81 background-size: 32px; 82 border: none; 83 height: 28px; 84 width: 28px; 85 } 86 87 #newtab-toggle:-moz-any(:hover, :active, [active]) { 88 background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32); 89 } 90 91 /* ROWS */ 92 .newtab-row { 93 margin-bottom: 20px; 94 } 95 96 .newtab-row:last-child { 97 margin-bottom: 0; 98 } 99 100 /* CELLS */ 101 .newtab-cell { 102 margin-inline-end: 20px; 103 background-color: #181411; 104 border: 1px solid rgb(64,64,64); 105 transition: border-color 100ms ease-out; 106 } 107 108 .newtab-cell:empty { 109 border: 1px dashed rgb(64,64,64); 110 } 111 112 .newtab-cell:last-child { 113 margin-inline-end: 0; 114 } 115 116 .newtab-cell:hover:not(:empty) { 117 border-color: rgb(64,64,64); 118 } 119 120 /* SITES */ 121 .newtab-site { 122 text-decoration: none; 123 transition-property: top, left, opacity, box-shadow, background-color; 124 box-shadow: 0 4px 6px rgba(255,255,255,.2); 125 } 126 127 .newtab-site:hover { 128 box-shadow: 0 4px 8px rgba(255,255,255,.5); 129 } 130 131 .newtab-site[dragged] { 132 transition-property: box-shadow, background-color; 133 background-color: #181411; 134 box-shadow: 0 18px 24px rgba(255,255,255,.5); 135 } 136 137 /* THUMBNAILS */ 138 .newtab-thumbnail { 139 background-origin: padding-box; 140 background-clip: padding-box; 141 background-repeat: no-repeat; 142 background-size: cover; 143 opacity: 1; 144 } 145 146 /* TITLES */ 147 .newtab-title { 148 padding: 0 8px; 149 background-color: #181411; 150 color: #bfbbb6; 151 line-height: 24px; 152 } 153 154 .newtab-site[pinned] .newtab-title { 155 padding-inline-start: 24px; 156 } 157 158 .newtab-site[pinned] .newtab-title::before { 159 background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266); 160 background-size: 10px; 161 content: ""; 162 height: 17px; 163 left: 0; 164 position: absolute; 165 width: 10px; 166 margin-left: 8px; 167 margin-top: 6px; 168 } 169 170 .newtab-site[pinned] .newtab-title:dir(rtl)::before { 171 left: auto; 172 right: 0; 173 } 174 175 /* CONTROLS */ 176 .newtab-control { 177 background-color: transparent; 178 background-size: 24px; 179 border: none; 180 height: 26px; 181 width: 24px; 182 } 183 184 .newtab-control-pin:dir(ltr), 185 .newtab-control-block:dir(rtl) { 186 left: 4px; 187 } 188 189 .newtab-control-block:dir(ltr), 190 .newtab-control-pin:dir(rtl) { 191 right: 4px; 192 } 193 194 .newtab-control-pin, 195 .newtab-site[pinned] .newtab-control-pin:hover { 196 background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 96, 33, 64); 197 } 198 199 .newtab-control-pin:hover:active, 200 .newtab-site[pinned] .newtab-control-pin:hover:active { 201 background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 160, 33, 128); 202 } 203 204 .newtab-control-pin:hover, 205 .newtab-site[pinned] .newtab-control-pin { 206 background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 128, 33, 96); 207 } 208 209 .newtab-control-block { 210 background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 192, 33, 160); 211 } 212 213 .newtab-control-block:hover { 214 background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 224, 33, 192); 215 } 216 217 .newtab-control-block:hover:active { 218 background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 256, 33, 224); 219 } 220 221 .newtab-undo-button { 222 -moz-appearance: none; 223 color: -moz-nativehyperlinktext; 224 color: rgb(0,102,204); 225 cursor: pointer; 226 padding: 0; 227 margin: 0 4px; 228 border: 0; 229 background: transparent; 230 text-decoration: none; 231 min-width: 0; 232 } 233 234 .newtab-undo-button > .button-box { 235 padding: 0; 236 } 237 238 #newtab-undo-close-button { 239 -moz-appearance: none; 240 padding: 0; 241 border: none; 242 -moz-user-focus: normal; 243 } 244 245 246 /* SEARCH */ 247 #searchEngineLogo { 248 /* remove the default DDG image - it looks really bad on our dark b/g */ 249 opacity: 0; 250 } 251 252 #searchText { 253 -moz-box-flex: 1; 254 color: #bfbbb6; 255 padding: 6px 8px; 256 background-color: #181411; 257 border: 1px solid; 258 border-color: rgb(64, 64, 64); 259 border-radius: 5px 0 0 5px; 260 box-shadow: none; 261 } 262 263 #searchText:-moz-dir(rtl) { 264 border-radius: 0 5px 5px 0; 265 } 266 267 #searchText:focus, 268 #searchText[autofocus] { 269 border-color: rgb(128, 128, 128); 270 } 271 272 #searchSubmit { 273 margin-inline-start: -1px; 274 padding: 0 9px; 275 color: #bfbbb6; 276 background-color: #181411; 277 border: 1px solid; 278 border-color: rgb(64, 64, 64); 279 border-radius: 0 5px 5px 0; 280 cursor: pointer; 281 transition-property: background-color, border-color, box-shadow; 282 transition-duration: 150ms; 283 box-shadow: none; 284 } 285 286 #searchSubmit:-moz-dir(rtl) { 287 border-radius: 5px 0 0 5px; 288 } 289 290 #searchText:focus + #searchSubmit, 291 #searchText + #searchSubmit:hover, 292 #searchText[autofocus] + #searchSubmit { 293 border-color: rgb(128, 128, 128); 294 background-color: #181411; 295 } 296 297 #searchText + #searchSubmit:hover:active { 298 border-color: rgb(64, 64, 64); 299 background-color: #181411; 300 }