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