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 /* SCROLLBOX */
  13 #newtab-scrollbox:not([page-disabled]),
  14 #newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
  15   color: #FF9F00;
  16   background-color: #000000;
  17 }
  18
  19 /* UNDO */
  20 #newtab-undo-container {
  21   padding: 4px 3px;
  22   border: 1px solid;
  23   border-color: #9C9CFF;
  24   background-color: #000000;
  25   color: #8050B0;
  26 }
  27
  28 #newtab-undo-label {
  29   margin-top: 0;
  30   margin-bottom: 0;
  31 }
  32
  33 .newtab-undo-button {
  34   color: #3333FF;
  35   cursor: pointer;
  36   padding: 0;
  37   margin: 0 4px;
  38   border: 0;
  39   background: transparent;
  40   text-decoration: none;
  41   min-width: 0;
  42 }
  43
  44 .newtab-undo-button:hover {
  45   text-decoration: underline;
  46 }
  47
  48 .newtab-undo-button:-moz-focusring {
  49   outline: 1px dotted;
  50 }
  51
  52 .newtab-undo-button > .button-box {
  53   padding: 0;
  54 }
  55
  56 #newtab-undo-close-button {
  57   padding: 0;
  58   border: none;
  59   list-style-image: url("chrome://global/skin/icons/close.png");
  60   -moz-image-region: rect(0, 16px, 16px, 0);
  61 }
  62
  63 #newtab-undo-close-button:hover {
  64   -moz-image-region: rect(0, 32px, 16px, 16px);
  65 }
  66
  67 #newtab-undo-close-button > .toolbarbutton-text {
  68   display: none;
  69 }
  70
  71 #newtab-undo-close-button:-moz-focusring {
  72   outline: 1px dotted;
  73 }
  74
  75 /* TOGGLE */
  76 #newtab-toggle {
  77   width: 16px;
  78   height: 16px;
  79   padding: 0;
  80   border: none;
  81   background: -216px 0 transparent url("chrome://browser/skin/newtab/controls.png");
  82 }
  83
  84 #newtab-toggle[page-disabled] {
  85   background-position: -232px 0;
  86 }
  87
  88 /* ROWS */
  89 .newtab-row {
  90   margin-bottom: 20px;
  91 }
  92
  93 .newtab-row:last-child {
  94   margin-bottom: 0;
  95 }
  96
  97 .newtab-row > .newtab-cell {
  98   /* this only applies before Directory Tiles work, row is gone afterwards. */
  99   -moz-margin-end: 20px;
 100 }
 101
 102 /* CELLS */
 103 .newtab-cell {
 104   background-color: rgba(255,159,0,.2);
 105   border: 1px solid;
 106   border-color: #9C9CFF;
 107   border-radius: 1px;
 108   transition: border-color 100ms ease-out;
 109 }
 110
 111 .newtab-cell:empty {
 112   border: 1px dashed;
 113 }
 114
 115 .newtab-row > .newtab-cell:last-child {
 116   -moz-margin-end: 0;
 117 }
 118
 119 .newtab-cell:hover:not(:empty):not([dragged]):not([ignorehover]) {
 120   border-color: #FFCF00;
 121 }
 122
 123 /* SITES */
 124 .newtab-site {
 125   text-decoration: none;
 126   transition-property: top, left, opacity, box-shadow, background-color;
 127 }
 128
 129 .newtab-cell:not([ignorehover]) > .newtab-site:hover,
 130 .newtab-site[dragged] {
 131   box-shadow: 0 0 10px rgba(0,132,132,.3);
 132 }
 133
 134 .newtab-site[dragged] {
 135   transition-property: box-shadow, background-color;
 136   background-color: #002121;
 137 }
 138
 139 /* THUMBNAILS */
 140 .newtab-thumbnail {
 141   background-origin: padding-box;
 142   background-clip: padding-box;
 143   background-repeat: no-repeat;
 144   background-size: cover;
 145 }
 146
 147 .newtab-site[type=affiliate] .newtab-thumbnail,
 148 .newtab-site[type=organic] .newtab-thumbnail,
 149 .newtab-site[type=sponsored] .newtab-thumbnail {
 150   background-position: center center;
 151   background-size: auto;
 152 }
 153
 154 /* TITLES */
 155 .newtab-title {
 156   padding: 0 8px;
 157   background-color: rgba(255,159,0,.8);
 158   color: #000000;
 159   line-height: 24px;
 160   bottom: 0 !important;
 161 }
 162
 163 .newtab-site[type=sponsored] .newtab-title {
 164   -moz-padding-end: 24px;
 165 }
 166
 167 /* CONTROLS */
 168 .newtab-control {
 169   width: 24px;
 170   height: 24px;
 171   padding: 1px 2px 3px;
 172   border: none;
 173   background: transparent url("chrome://browser/skin/newtab/controls.png");
 174 }
 175
 176 .newtab-control-pin:hover {
 177   background-position: -24px 0;
 178 }
 179
 180 .newtab-control-pin:active {
 181   background-position: -48px 0;
 182 }
 183
 184 .newtab-control-pin[pinned] {
 185   background-position: -72px 0;
 186 }
 187
 188 .newtab-control-pin[pinned]:hover {
 189   background-position: -96px 0;
 190 }
 191
 192 .newtab-control-pin[pinned]:active {
 193   background-position: -120px 0;
 194 }
 195
 196 .newtab-control-block {
 197   background-position: -144px 0;
 198 }
 199
 200 .newtab-control-block:hover {
 201   background-position: -168px 0;
 202 }
 203
 204 .newtab-control-block:active {
 205   background-position: -192px 0;
 206 }
 207
 208 .newtab-control-sponsored {
 209   background-position: -249px -1px;
 210 }
 211
 212 .newtab-control-sponsored:hover {
 213   background-position: -265px -1px;
 214 }
 215
 216 .newtab-control-sponsored[panelShown] {
 217   background-position: -281px -1px;
 218 }