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   background-position: center center;
 201 }
 202
 203 body.compact .newtab-site[type=affiliate] .newtab-thumbnail {
 204   background-position: center 30%;
 205 }
 206
 207 .newtab-site[type=affiliate] .newtab-thumbnail {
 208   background-size: auto;
 209 }
 210
 211 /* TITLES */
 212 .newtab-title {
 213   background-color: #FF9F00;
 214   font-size: 13px;
 215   line-height: 30px;
 216   border: 1px solid #9C9CFF;
 217   border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius);
 218 }
 219
 220 body.compact .newtab-title {
 221   background-color: rgba(255,159,0,.85);
 222   font-size: 12px;
 223   line-height: 21px;
 224 /*  border: 1px solid hsla(0,0%,80%,.8);
 225   border-top-color: hsla(0,0%,0%,.1);*/
 226   background-clip: padding-box;
 227 }
 228
 229 .newtab-title {
 230   color: #000000;
 231 }
 232
 233 body.compact .newtab-title {
 234   color: #000000;
 235 }
 236
 237 body:not(.compact) .newtab-site:hover .newtab-title {
 238   background-color: #FFCF00;
 239 /*  border-color: #333;
 240   border-top-color: white;*/
 241 }
 242
 243 body.compact .newtab-site:hover .newtab-title {
 244 /*  color: white;
 245   background-color: hsla(0,0%,20%,.85);
 246   border-color: hsla(0,0%,0%,.8);
 247   border-top-color: white;*/
 248 }
 249
 250 .newtab-site[pinned] .newtab-title {
 251   padding-inline-start: 24px;
 252 }
 253
 254 .newtab-site[pinned] .newtab-title::before {
 255   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
 256   background-size: 10px;
 257   content: "";
 258   height: 17px;
 259   left: 5px;
 260   top: 5px;
 261   position: absolute;
 262   width: 10px;
 263   margin-left: 8px;
 264   margin-top: 0;
 265 }
 266
 267 .newtab-site[pinned] .newtab-title:dir(rtl)::before {
 268   left: auto;
 269   right: 0;
 270 }
 271
 272 /* CONTROLS */
 273 .newtab-control {
 274   background-color: transparent;
 275   background-size: 24px;
 276   border: none;
 277   height: 24px;
 278   width: 24px;
 279   top: 4px;
 280 }
 281
 282 .newtab-control-pin:dir(ltr),
 283 .newtab-control-block:dir(rtl) {
 284   left: 4px;
 285 }
 286
 287 .newtab-control-block:dir(ltr),
 288 .newtab-control-pin:dir(rtl) {
 289   right: 4px;
 290 }
 291
 292 body.compact .newtab-control {
 293   top: -8px;
 294 }
 295
 296 body.compact .newtab-control-pin:dir(ltr),
 297 body.compact .newtab-control-block:dir(rtl) {
 298   left: -8px;
 299 }
 300
 301 body.compact .newtab-control-block:dir(ltr),
 302 body.compact .newtab-control-pin:dir(rtl) {
 303   right: -8px;
 304 }
 305
 306 .newtab-control-pin,
 307 .newtab-site[pinned] .newtab-control-pin:hover:active {
 308   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 96, 32, 64);
 309 }
 310
 311 .newtab-control-pin:hover,
 312 .newtab-site[pinned] .newtab-control-pin:hover {
 313   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 128, 32, 96);
 314 }
 315
 316 .newtab-control-pin:hover:active,
 317 .newtab-site[pinned] .newtab-control-pin {
 318   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128);
 319 }
 320
 321 .newtab-control-block {
 322   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
 323 }
 324
 325 .newtab-control-block:hover {
 326   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
 327 }
 328
 329 .newtab-control-block:hover:active {
 330   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
 331 }
 332
 333 /* SEARCH */
 334 #newtab-search-logo:hover {
 335   background-color: #FFCF00;
 336   border: none;
 337 }
 338 #newtab-search-logo[active] {
 339   background-color: #FF9F00;
 340   border: none;
 341 }
 342 #newtab-search-logo {
 343   background-image: url("chrome://browser/skin/magnifier.png");
 344 }
 345 #newtab-search-logo.magnifier[active],
 346 #newtab-search-logo.magnifier:hover {
 347   background-image: url("chrome://browser/skin/magnifier-hover.png");
 348 }
 349 /* Newer versions only */
 350 #newtab-search-icon {
 351   background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass");
 352 }
 353 #newtab-search-logo.magnifier[active],
 354 #newtab-search-logo.magnifier:hover {
 355   background-image: url("chrome://browser/skin/magnifier-hover.png");
 356 }
 357
 358 #newtab-search-text {
 359   border: 1px solid #9C9CFF;
 360   background-color: #000000;
 361   color: #E7ADE7;
 362 }
 363 #newtab-search-text::placeholder {
 364   color: #8050B0;
 365 }
 366 #newtab-search-text:focus {
 367   border: 1px solid #008484;
 368   box-shadow: 0 0 0 1px #008484 inset;
 369 }
 370
 371 #newtab-search-submit {
 372   background-image: none;
 373   background-color: #C09070;
 374   color: #000000;
 375   box-shadow: none;
 376   border-radius: 0 300px 300px 0;
 377   border: none;
 378   margin-inline-start: 3px;
 379 }
 380 #newtab-search-text:focus + #newtab-search-submit,
 381 #newtab-search-text[autofocus] + #newtab-search-submit {
 382   background-image: none;
 383   background-color: #008484;
 384   color: #000000;
 385   box-shadow: none;
 386 }
 387 #newtab-search-text + #newtab-search-submit:hover {
 388   background-image: none;
 389   background-color: #FFCF00;
 390   color: #000000;
 391   box-shadow: none;
 392 }
 393 /* Newer versions only */
 394 #newtab-search-submit[value=""],
 395 #newtab-search-text:focus + #newtab-search-submit[value=""],
 396 #newtab-search-text[autofocus] + #newtab-search-submit[value=""],
 397 #newtab-search-text + #newtab-search-submit[value=""]:hover {
 398   background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go");
 399 }
 400
 401 /* CUSTOMIZE */
 402 #newtab-customize-overlay {
 403   background: #A09090;
 404 }
 405
 406 #newtab-customize-panel,
 407 #newtab-customize-panel-anchor,
 408 #newtab-customize-panel-inner-wrapper,
 409 .newtab-customize-panel-item,
 410 .newtab-customize-complex-option {
 411   background-color: #000000;
 412 }
 413
 414 #newtab-customize-title {
 415   color: #9C9CFF;
 416   background-color: #000000;
 417 }
 418
 419 .newtab-customize-panel-item[selected],
 420 .newtab-customize-panel-subitem[selected] {
 421   color: #FF9F00;
 422 }
 423
 424 .newtab-customize-panel-item:not([selected]),
 425 .newtab-customize-panel-subitem:not([selected]) {
 426   color: #A09090;
 427 }
 428
 429 .newtab-customize-panel-subitem > .checkbox {
 430   background-color: #000000;
 431   border-color: #A09090;
 432 }
 433
 434 .newtab-customize-panel-subitem[selected] > .checkbox {
 435   background-color: #000000;
 436   background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg");
 437   color: #FF9F00;
 438 }
 439
 440 .newtab-customize-panel-item:not(:first-child),
 441 .newtab-search-panel-engine {
 442   border-top: 1px solid #A09090;
 443 }
 444
 445 .newtab-customize-complex-option:hover > .selectable:not([selected]),
 446 .selectable:hover:not([selected]),
 447 .newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem,
 448 .newtab-customize-panel-item:hover:not([selected]) {
 449   background-color: #FFCF00;
 450   color: #000000;
 451 }
 452
 453 .newtab-customize-complex-option:hover > .selectable:not([selected]),
 454 .selectable:hover:not([selected]) {
 455   background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg");
 456 }