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:-moz-any(:hover, :active, [active]) {
  94   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 64, 32, 32);
  95   background-color: #FFCF00;
  96 }
  97
  98 /* CELLS */
  99 .newtab-cell {
 100   background-color: rgba(255,159,0,.2);
 101   border: 1px solid;
 102   border-color: #9C9CFF;
 103   border-radius: 10px;
 104 }
 105
 106 .newtab-cell:empty {
 107   outline: 2px dashed #A09090;
 108   -moz-outline-radius: 2px;
 109 }
 110
 111 /* SITES */
 112 .newtab-site {
 113   border-radius: inherit;
 114   text-decoration: none;
 115   transition-property: top, left, opacity, box-shadow, background-color;
 116 }
 117
 118 .newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
 119 .newtab-cell:not([ignorehover]) .newtab-link:hover,
 120 .newtab-site[dragged] {
 121   box-shadow: 0 0 10px rgba(0,132,132,.3);
 122 }
 123
 124 .newtab-site[dragged] {
 125   transition-property: box-shadow, background-color;
 126   background-color: #002121;
 127 }
 128
 129 /* LINKS */
 130 .newtab-link {
 131   border-radius: 10px;
 132   overflow: hidden;
 133 }
 134
 135 /* THUMBNAILS */
 136 .newtab-thumbnail {
 137   background-origin: padding-box;
 138   background-clip: padding-box;
 139   background-repeat: no-repeat;
 140   background-size: cover;
 141   border-radius: 8px 8px 0px 0px;
 142   height: 180px;
 143   transition: opacity 100ms ease-out;
 144 }
 145
 146 .newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
 147   opacity: 0;
 148 }
 149
 150 .newtab-site[type=affiliate] .newtab-thumbnail,
 151 .newtab-site[type=enhanced] .newtab-thumbnail,
 152 .newtab-site[type=organic] .newtab-thumbnail,
 153 .newtab-site[type=sponsored] .newtab-thumbnail {
 154   background-position: center center;
 155   background-size: auto;
 156 }
 157
 158 /* TITLES */
 159 .newtab-sponsored,
 160 .newtab-title,
 161 .newtab-suggested {
 162   padding: 0 8px;
 163   background-color: rgba(255,159,0,.8);
 164   color: #000000;
 165   border: none;
 166   line-height: 24px;
 167   bottom: 0 !important;
 168 }
 169
 170 /*
 171 .newtab-suggested {
 172   background-color: #9C9CFF;
 173 }
 174
 175 .newtab-suggested:hover {
 176   background-color: #FFCF00;
 177   border: 1px solid #9C9CFF;
 178 }
 179
 180 .newtab-suggested[active] {
 181   background-color: #FF9F00;
 182   border: 0;
 183 }
 184 */
 185 .newtab-site:hover .newtab-title {
 186   background-color: #FFCF00;
 187 }
 188
 189 .newtab-site[pinned] .newtab-title {
 190   -moz-padding-start: 24px;
 191 }
 192
 193 .newtab-site[pinned] .newtab-title::before {
 194   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
 195   background-size: 10px;
 196   content: "";
 197   height: 17px;
 198   left: 5px;
 199   top: 5px;
 200   position: absolute;
 201   width: 10px;
 202   margin-left: 8px;
 203   margin-top: 0;
 204 }
 205
 206 .newtab-site[pinned] .newtab-title:-moz-dir(rtl)::before {
 207   left: auto;
 208   right: 0;
 209 }
 210
 211 /* CONTROLS */
 212 .newtab-control {
 213   background-color: transparent;
 214   background-size: 24px;
 215   border: none;
 216   height: 24px;
 217   width: 24px;
 218 }
 219
 220 .newtab-control-pin,
 221 .newtab-site[pinned] .newtab-control-pin:hover:active {
 222   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 96, 32, 64);
 223 }
 224
 225 .newtab-control-pin:hover,
 226 .newtab-site[pinned] .newtab-control-pin:hover {
 227   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 128, 32, 96);
 228 }
 229
 230 .newtab-control-pin:hover:active,
 231 .newtab-site[pinned] .newtab-control-pin {
 232   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128);
 233 }
 234
 235 .newtab-control-block {
 236   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 192, 32, 160);
 237 }
 238
 239 .newtab-control-block:hover {
 240   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 224, 32, 192);
 241 }
 242
 243 .newtab-control-block:hover:active {
 244   background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 256, 32, 224);
 245 }
 246
 247 /* SEARCH */
 248 #newtab-search-logo:hover {
 249   background-color: #FFCF00;
 250   border: none;
 251 }
 252 #newtab-search-logo[active] {
 253   background-color: #FF9F00;
 254   border: none;
 255 }
 256 #newtab-search-logo {
 257   background-image: url("chrome://browser/skin/magnifier.png");
 258 }
 259 #newtab-search-logo.magnifier[active],
 260 #newtab-search-logo.magnifier:hover {
 261   background-image: url("chrome://browser/skin/magnifier-hover.png");
 262 }
 263 /* Newer versions only */
 264 #newtab-search-icon {
 265   background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass");
 266 }
 267 #newtab-search-logo.magnifier[active],
 268 #newtab-search-logo.magnifier:hover {
 269   background-image: url("chrome://browser/skin/magnifier-hover.png");
 270 }
 271
 272 #newtab-search-text {
 273   border: 1px solid #9C9CFF;
 274   background-color: #000000;
 275   color: #E7ADE7;
 276 }
 277 #newtab-search-text::-moz-placeholder {
 278   color: #8050B0;
 279 }
 280 #newtab-search-text:focus {
 281   border: 1px solid #008484;
 282   box-shadow: 0 0 0 1px #008484 inset;
 283 }
 284
 285 #newtab-search-submit {
 286   background-image: none;
 287   background-color: #C09070;
 288   color: #000000;
 289   box-shadow: none;
 290   border-radius: 0 300px 300px 0;
 291   border: none;
 292   -moz-margin-start: 3px;
 293 }
 294 #newtab-search-text:focus + #newtab-search-submit,
 295 #newtab-search-text[autofocus] + #newtab-search-submit {
 296   background-image: none;
 297   background-color: #008484;
 298   color: #000000;
 299   box-shadow: none;
 300 }
 301 #newtab-search-text + #newtab-search-submit:hover {
 302   background-image: none;
 303   background-color: #FFCF00;
 304   color: #000000;
 305   box-shadow: none;
 306 }
 307 /* Newer versions only */
 308 #newtab-search-submit[value=""],
 309 #newtab-search-text:focus + #newtab-search-submit[value=""],
 310 #newtab-search-text[autofocus] + #newtab-search-submit[value=""],
 311 #newtab-search-text + #newtab-search-submit[value=""]:hover {
 312   background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go");
 313 }
 314
 315 /* CUSTOMIZE */
 316 #newtab-customize-overlay {
 317   background: #A09090;
 318 }
 319
 320 #newtab-customize-panel,
 321 #newtab-customize-panel-anchor,
 322 #newtab-customize-panel-inner-wrapper,
 323 .newtab-customize-panel-item,
 324 .newtab-customize-complex-option {
 325   background-color: #000000;
 326 }
 327
 328 #newtab-customize-title {
 329   color: #9C9CFF;
 330   background-color: #000000;
 331 }
 332
 333 .newtab-customize-panel-item[selected],
 334 .newtab-customize-panel-subitem[selected] {
 335   color: #FF9F00;
 336 }
 337
 338 .newtab-customize-panel-item:not([selected]),
 339 .newtab-customize-panel-subitem:not([selected]) {
 340   color: #A09090;
 341 }
 342
 343 .newtab-customize-panel-subitem > .checkbox {
 344   background-color: #000000;
 345   border-color: #A09090;
 346 }
 347
 348 .newtab-customize-panel-subitem[selected] > .checkbox {
 349   background-color: #000000;
 350   background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg");
 351   color: #FF9F00;
 352 }
 353
 354 .newtab-customize-panel-item:not(:first-child),
 355 .newtab-search-panel-engine {
 356   border-top: 1px solid #A09090;
 357 }
 358
 359 .newtab-customize-complex-option:hover > .selectable:not([selected]),
 360 .selectable:hover:not([selected]),
 361 .newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem,
 362 .newtab-customize-panel-item:hover:not([selected]) {
 363   background-color: #FFCF00;
 364   color: #000000;
 365 }
 366
 367 .newtab-customize-complex-option:hover > .selectable:not([selected]),
 368 .selectable:hover:not([selected]) {
 369   background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg");
 370 }