LCARStrek/browser/newtab/newTab.css

   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   padding: 0;
  10 }
  11
  12 body {
  13   background-color: #000000
  14 }
  15
  16 /* UNDO */
  17 #newtab-undo-container {
  18   padding: 4px 3px;
  19   border: 1px solid;
  20   border-color: #9C9CFF;
  21   background-color: #000000;
  22   color: #8050B0;
  23 }
  24
  25 #newtab-undo-label {
  26   margin-top: 0;
  27   margin-bottom: 0;
  28 }
  29
  30 .newtab-undo-button {
  31   color: #3333FF;
  32   cursor: pointer;
  33   padding: 0;
  34   margin: 0 4px;
  35   border: 0;
  36   background: transparent;
  37   text-decoration: none;
  38   min-width: 0;
  39 }
  40
  41 .newtab-undo-button:hover {
  42   text-decoration: underline;
  43 }
  44
  45 .newtab-undo-button:-moz-focusring {
  46   outline: 1px dotted;
  47 }
  48
  49 .newtab-undo-button > .button-box {
  50   padding: 0;
  51 }
  52
  53 #newtab-undo-close-button {
  54   padding: 0;
  55   border: none;
  56   list-style-image: url("chrome://global/skin/icons/close.png");
  57   -moz-image-region: rect(0, 16px, 16px, 0);
  58 }
  59
  60 #newtab-undo-close-button:hover {
  61   -moz-image-region: rect(0, 32px, 16px, 16px);
  62 }
  63
  64 #newtab-undo-close-button {
  65   -moz-appearance: none;
  66   padding: 0;
  67   border: none;
  68   height: 16px;
  69   width: 16px;
  70   float: right;
  71   right: 0;
  72   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 16, 16, 0);
  73   background-color: transparent;
  74 }
  75
  76 #newtab-undo-close-button:hover,
  77 #newtab-undo-close-button:active {
  78   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16);
  79 }
  80
  81 /* CUSTOMIZE */
  82 #newtab-customize-button,
  83 .newtab-customize {
  84   background-color: transparent;
  85   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 32, 32, 0);
  86   background-size: 28px;
  87   border: none;
  88   border-radius: 3px;
  89   height: 28px;
  90   width: 28px;
  91 }
  92
  93 #newtab-customize-button {
  94   font-size: 28px;
  95   padding: 0;
  96   /* only display the text label when CSS backgrounds are disabled (e.g. in high contrast mode) */
  97   color: transparent;
  98 }
  99
 100 #newtab-customize-button:-moz-any(:hover, :active, [active]) {
 101   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 64, 32, 32);
 102   background-color: #FFCF00;
 103 }
 104
 105 /* GRID */
 106 #topsites-heading {
 107   color: #A09090;
 108   font-size: 1em;
 109   font-weight: normal;
 110   /* Position the heading such that it doesn't affect how many cells we
 111      can fit into the grid. */
 112   position: absolute;
 113   /* The top margin moves the heading away from the grid.
 114      The horizontal margin aligns the heading with the cells. */
 115   margin: -1em 10px 0;
 116 }
 117
 118 /* CELLS */
 119 .newtab-cell {
 120   --cell-corner-radius: 10px;
 121   background-color: rgba(255,159,0,.2);
 122   border: 1px solid;
 123   border-color: #9C9CFF;
 124   border-radius: var(--cell-corner-radius);
 125 }
 126
 127 body.compact .newtab-cell {
 128   --cell-corner-radius: 3px;
 129 }
 130
 131 .newtab-cell:empty {
 132   outline: 2px dashed #A09090;
 133   outline-offset: -2px;
 134   -moz-outline-radius: var(--cell-corner-radius);
 135 }
 136
 137 /* SITES */
 138 .newtab-site {
 139   border-radius: var(--cell-corner-radius);
 140   text-decoration: none;
 141   transition-property: top, left, opacity, box-shadow, background-color;
 142 }
 143
 144 .newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
 145 .newtab-cell:not([ignorehover]) .newtab-link:hover,
 146 .newtab-site[dragged] {
 147   box-shadow: 0 0 10px rgba(0,132,132,.3);
 148 }
 149
 150 .newtab-site[dragged] {
 151   transition-property: box-shadow, background-color;
 152   background-color: #002121;
 153 }
 154
 155 /* LINKS */
 156 .newtab-link {
 157   border-radius: var(--cell-corner-radius);
 158   overflow: hidden;
 159 }
 160
 161 /***
 162  * If you change the sizes here, change them in newTab.css
 163  * and the preference values:
 164  * toolkit.pageThumbs.minWidth
 165  * toolkit.pageThumbs.minHeight
 166  */
 167 /* THUMBNAILS */
 168 .newtab-thumbnail {
 169   background-origin: padding-box;
 170   background-clip: padding-box;
 171   background-repeat: no-repeat;
 172   background-size: cover;
 173   height: 180px;
 174   transition: opacity 100ms ease-out;
 175 }
 176
 177 body.compact .newtab-thumbnail {
 178   height: 100%;
 179   border-radius: calc(var(--cell-corner-radius) + 1px);
 180   outline: 1px solid hsla(0,0%,0%,.1);
 181   -moz-outline-radius: var(--cell-corner-radius);
 182   outline-offset: -1px;
 183 }
 184
 185 .newtab-thumbnail.placeholder {
 186   color: #FFCF00;
 187   font-size: 85px;
 188   line-height: 200%;
 189 }
 190
 191 body.compact .newtab-thumbnail.placeholder {
 192   font-size: 45px;
 193 }
 194
 195 .newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
 196   opacity: 0;
 197 }
 198
 199 .newtab-site[type=affiliate] .newtab-thumbnail,
 200 .newtab-site[type=enhanced] .newtab-thumbnail,
 201 .newtab-site[type=organic] .newtab-thumbnail,
 202 .newtab-site[type=sponsored] .newtab-thumbnail {
 203   background-position: center center;
 204 }
 205
 206 body.compact .newtab-site[type=affiliate] .newtab-thumbnail {
 207   background-position: center 30%;
 208 }
 209
 210 .newtab-site[type=affiliate] .newtab-thumbnail,
 211 body:not(.compact) .newtab-site[type=enhanced] .newtab-thumbnail,
 212 body:not(.compact) .newtab-site[type=organic] .newtab-thumbnail,
 213 body:not(.compact) .newtab-site[type=sponsored] .newtab-thumbnail {
 214   background-size: auto;
 215 }
 216
 217 /* TITLES */
 218 .newtab-title {
 219   background-color: #FF9F00;
 220   font-size: 13px;
 221   line-height: 30px;
 222   border: 1px solid #9C9CFF;
 223   border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius);
 224 }
 225
 226 body.compact .newtab-title {
 227   background-color: rgba(255,159,0,.85);
 228   font-size: 12px;
 229   line-height: 21px;
 230 /*  border: 1px solid hsla(0,0%,80%,.8);
 231   border-top-color: hsla(0,0%,0%,.1);*/
 232   background-clip: padding-box;
 233 }
 234
 235 .newtab-title,
 236 .newtab-suggested {
 237   color: #000000;
 238 }
 239
 240 body.compact .newtab-title,
 241 body.compact .newtab-suggested {
 242   color: #000000;
 243 }
 244
 245 .newtab-suggested {
 246   background-color: #9C9CFF;
 247 }
 248
 249 .newtab-suggested:hover {
 250   background-color: #FFCF00;
 251   border: 1px solid #9C9CFF;
 252 }
 253
 254 .newtab-suggested[active] {
 255   background-color: #FF9F00;
 256   border: 0;
 257 }
 258
 259 body:not(.compact) .newtab-site:hover .newtab-title {
 260   background-color: #FFCF00;
 261 /*  border-color: #333;
 262   border-top-color: white;*/
 263 }
 264
 265 body.compact .newtab-site:hover .newtab-title {
 266 /*  color: white;
 267   background-color: hsla(0,0%,20%,.85);
 268   border-color: hsla(0,0%,0%,.8);
 269   border-top-color: white;*/
 270 }
 271
 272 .newtab-site[pinned] .newtab-title {
 273   padding-inline-start: 24px;
 274 }
 275
 276 .newtab-site[pinned] .newtab-title::before {
 277   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
 278   background-size: 10px;
 279   content: "";
 280   height: 17px;
 281   left: 5px;
 282   top: 5px;
 283   position: absolute;
 284   width: 10px;
 285   margin-left: 8px;
 286   margin-top: 0;
 287 }
 288
 289 .newtab-site[pinned] .newtab-title:dir(rtl)::before {
 290   left: auto;
 291   right: 0;
 292 }
 293
 294 /* CONTROLS */
 295 .newtab-control {
 296   background-color: transparent;
 297   background-size: 24px;
 298   border: none;
 299   height: 24px;
 300   width: 24px;
 301   top: 4px;
 302 }
 303
 304 .newtab-control-pin:dir(ltr),
 305 .newtab-control-block:dir(rtl) {
 306   left: 4px;
 307 }
 308
 309 .newtab-control-block:dir(ltr),
 310 .newtab-control-pin:dir(rtl) {
 311   right: 4px;
 312 }
 313
 314 body.compact .newtab-control {
 315   top: -8px;
 316 }
 317
 318 body.compact .newtab-control-pin:dir(ltr),
 319 body.compact .newtab-control-block:dir(rtl) {
 320   left: -8px;
 321 }
 322
 323 body.compact .newtab-control-block:dir(ltr),
 324 body.compact .newtab-control-pin:dir(rtl) {
 325   right: -8px;
 326 }
 327
 328 .newtab-control-pin,
 329 .newtab-site[pinned] .newtab-control-pin:hover:active {
 330   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 96, 32, 64);
 331 }
 332
 333 .newtab-control-pin:hover,
 334 .newtab-site[pinned] .newtab-control-pin:hover {
 335   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 128, 32, 96);
 336 }
 337
 338 .newtab-control-pin:hover:active,
 339 .newtab-site[pinned] .newtab-control-pin {
 340   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128);
 341 }
 342
 343 .newtab-control-block {
 344   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
 345 }
 346
 347 .newtab-control-block:hover {
 348   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
 349 }
 350
 351 .newtab-control-block:hover:active {
 352   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
 353 }
 354
 355 /* SEARCH */
 356 #newtab-search-logo:hover {
 357   background-color: #FFCF00;
 358   border: none;
 359 }
 360 #newtab-search-logo[active] {
 361   background-color: #FF9F00;
 362   border: none;
 363 }
 364 #newtab-search-logo {
 365   background-image: url("chrome://browser/skin/magnifier.png");
 366 }
 367 #newtab-search-logo.magnifier[active],
 368 #newtab-search-logo.magnifier:hover {
 369   background-image: url("chrome://browser/skin/magnifier-hover.png");
 370 }
 371 /* Newer versions only */
 372 #newtab-search-icon {
 373   background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass");
 374 }
 375 #newtab-search-logo.magnifier[active],
 376 #newtab-search-logo.magnifier:hover {
 377   background-image: url("chrome://browser/skin/magnifier-hover.png");
 378 }
 379
 380 #newtab-search-text {
 381   border: 1px solid #9C9CFF;
 382   background-color: #000000;
 383   color: #E7ADE7;
 384 }
 385 #newtab-search-text::placeholder {
 386   color: #8050B0;
 387 }
 388 #newtab-search-text:focus {
 389   border: 1px solid #008484;
 390   box-shadow: 0 0 0 1px #008484 inset;
 391 }
 392
 393 #newtab-search-submit {
 394   background-image: none;
 395   background-color: #C09070;
 396   color: #000000;
 397   box-shadow: none;
 398   border-radius: 0 300px 300px 0;
 399   border: none;
 400   margin-inline-start: 3px;
 401 }
 402 #newtab-search-text:focus + #newtab-search-submit,
 403 #newtab-search-text[autofocus] + #newtab-search-submit {
 404   background-image: none;
 405   background-color: #008484;
 406   color: #000000;
 407   box-shadow: none;
 408 }
 409 #newtab-search-text + #newtab-search-submit:hover {
 410   background-image: none;
 411   background-color: #FFCF00;
 412   color: #000000;
 413   box-shadow: none;
 414 }
 415 /* Newer versions only */
 416 #newtab-search-submit[value=""],
 417 #newtab-search-text:focus + #newtab-search-submit[value=""],
 418 #newtab-search-text[autofocus] + #newtab-search-submit[value=""],
 419 #newtab-search-text + #newtab-search-submit[value=""]:hover {
 420   background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go");
 421 }
 422
 423 /* CUSTOMIZE */
 424 #newtab-customize-overlay {
 425   background: #A09090;
 426 }
 427
 428 #newtab-customize-panel,
 429 #newtab-customize-panel-anchor,
 430 #newtab-customize-panel-inner-wrapper,
 431 .newtab-customize-panel-item,
 432 .newtab-customize-complex-option {
 433   background-color: #000000;
 434 }
 435
 436 #newtab-customize-title {
 437   color: #9C9CFF;
 438   background-color: #000000;
 439 }
 440
 441 .newtab-customize-panel-item[selected],
 442 .newtab-customize-panel-subitem[selected] {
 443   color: #FF9F00;
 444 }
 445
 446 .newtab-customize-panel-item:not([selected]),
 447 .newtab-customize-panel-subitem:not([selected]) {
 448   color: #A09090;
 449 }
 450
 451 .newtab-customize-panel-subitem > .checkbox {
 452   background-color: #000000;
 453   border-color: #A09090;
 454 }
 455
 456 .newtab-customize-panel-subitem[selected] > .checkbox {
 457   background-color: #000000;
 458   background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg");
 459   color: #FF9F00;
 460 }
 461
 462 .newtab-customize-panel-item:not(:first-child),
 463 .newtab-search-panel-engine {
 464   border-top: 1px solid #A09090;
 465 }
 466
 467 .newtab-customize-complex-option:hover > .selectable:not([selected]),
 468 .selectable:hover:not([selected]),
 469 .newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem,
 470 .newtab-customize-panel-item:hover:not([selected]) {
 471   background-color: #FFCF00;
 472   color: #000000;
 473 }
 474
 475 .newtab-customize-complex-option:hover > .selectable:not([selected]),
 476 .selectable:hover:not([selected]) {
 477   background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg");
 478 }