| OLD | NEW |
| (Empty) |
| 1 /* Most Visited */ | |
| 2 | |
| 3 #most-visited-maxiview { | |
| 4 position: relative; | |
| 5 height: 366px; | |
| 6 -webkit-user-select: none; | |
| 7 } | |
| 8 | |
| 9 .thumbnail-container { | |
| 10 position: absolute; | |
| 11 color: hsl(213, 90%, 24%); | |
| 12 text-decoration: none; | |
| 13 -webkit-transition: left .15s, right .15s, top .15s; | |
| 14 text-decoration: none; | |
| 15 } | |
| 16 | |
| 17 .thumbnail-container:focus { | |
| 18 outline: none; | |
| 19 } | |
| 20 | |
| 21 .thumbnail, | |
| 22 .thumbnail-container > .title { | |
| 23 width: 207px; /* natural size is 196 */ | |
| 24 height: 129px; /* 136 */ | |
| 25 -webkit-transition: width .15s, height .15s; | |
| 26 } | |
| 27 | |
| 28 .thumbnail-container > .title { | |
| 29 line-height: 16px; | |
| 30 height: 16px; | |
| 31 margin: 0; | |
| 32 margin-top: 4px; | |
| 33 font-size: 100%; | |
| 34 font-weight: normal; | |
| 35 padding: 0 3px; | |
| 36 opacity: 1; | |
| 37 -webkit-transition: opacity .15s, width .15s; | |
| 38 color: black; | |
| 39 } | |
| 40 | |
| 41 .thumbnail-wrapper { | |
| 42 display: block; | |
| 43 background-size: 212px 132px; | |
| 44 background: no-repeat 4px 4px; | |
| 45 background-color: white; | |
| 46 border-radius: 5px; | |
| 47 -webkit-transition: background-size .15s; | |
| 48 position: relative; | |
| 49 } | |
| 50 | |
| 51 .filler * { | |
| 52 visibility: hidden; | |
| 53 } | |
| 54 | |
| 55 .filler { | |
| 56 pointer-events: none; | |
| 57 } | |
| 58 | |
| 59 .filler .thumbnail-wrapper { | |
| 60 visibility: visible; | |
| 61 border: 3px solid hsl(213, 60%, 92%); | |
| 62 } | |
| 63 | |
| 64 .filler .thumbnail { | |
| 65 visibility: inherit; | |
| 66 border: 1px solid white; | |
| 67 padding: 0; | |
| 68 background-color: hsl(213, 60%, 92%); | |
| 69 } | |
| 70 | |
| 71 .edit-bar { | |
| 72 display: -webkit-box; | |
| 73 -webkit-box-orient: horizontal; | |
| 74 -webkit-box-align: stretch; | |
| 75 padding: 3px; | |
| 76 padding-bottom: 0; | |
| 77 height: 17px; /* 23 - 2 * 3 */ | |
| 78 cursor: move; | |
| 79 font-size: 100%; | |
| 80 line-height: 17px; | |
| 81 background: hsl(213, 54%, 95%); | |
| 82 border-top-left-radius: 4px; | |
| 83 border-top-right-radius: 4px; | |
| 84 position: relative; | |
| 85 margin-top: 21px; | |
| 86 margin-bottom: -21px; | |
| 87 -webkit-transition: margin .15s, background .15s; | |
| 88 } | |
| 89 | |
| 90 .edit-bar > * { | |
| 91 display: block; | |
| 92 position: relative; | |
| 93 } | |
| 94 | |
| 95 .thumbnail-container:focus .edit-bar, | |
| 96 .thumbnail-container:hover .edit-bar { | |
| 97 margin-top: 0; | |
| 98 margin-bottom: 0; | |
| 99 -webkit-transition-delay: .5s, 0s; | |
| 100 | |
| 101 /* We need background-color as well to get the fade out animation correct */ | |
| 102 background-color: hsl(213, 66%, 57%); | |
| 103 background-image: -webkit-linear-gradient(hsl(213, 87%, 67%), | |
| 104 hsl(213, 66%, 57%)); | |
| 105 } | |
| 106 | |
| 107 .edit-bar > .spacer { | |
| 108 -webkit-box-flex: 1; | |
| 109 } | |
| 110 | |
| 111 .edit-bar > .pin, | |
| 112 .edit-bar > .remove { | |
| 113 width: 16px; | |
| 114 height: 16px; | |
| 115 cursor: pointer; | |
| 116 background-image: no-repeat 50% 50%; | |
| 117 } | |
| 118 | |
| 119 .edit-bar > .pin { | |
| 120 background-image: url('ntp_pin_off.png'); | |
| 121 } | |
| 122 | |
| 123 .edit-bar > .pin:hover { | |
| 124 background-image: url('ntp_pin_off_h.png'); | |
| 125 } | |
| 126 | |
| 127 .edit-bar > .pin:active { | |
| 128 background-image: url('ntp_pin_off_p.png'); | |
| 129 } | |
| 130 | |
| 131 .pinned .edit-bar > .pin { | |
| 132 background-image: url('ntp_pin_on.png'); | |
| 133 } | |
| 134 | |
| 135 .pinned .edit-bar > .pin:hover { | |
| 136 background-image: url(ntp_pin_on_h.png'); | |
| 137 } | |
| 138 | |
| 139 .pinned .edit-bar > .pin:active { | |
| 140 background-image: url(ntp_pin_on_p.png'); | |
| 141 } | |
| 142 | |
| 143 .edit-bar > .remove { | |
| 144 background-image: url('ntp_close.png'); | |
| 145 } | |
| 146 | |
| 147 .edit-bar > .remove:hover { | |
| 148 background-image: url('ntp_close_h.png'); | |
| 149 } | |
| 150 | |
| 151 .edit-bar > .remove:active { | |
| 152 background-image: url('ntp_close_p.png'); | |
| 153 } | |
| 154 | |
| 155 .thumbnail-container > .title > div { | |
| 156 white-space: nowrap; | |
| 157 overflow: hidden; | |
| 158 text-overflow: ellipsis; | |
| 159 background: no-repeat 0 50%; | |
| 160 background-size: 16px; | |
| 161 padding-left: 20px; /* we cannot use padding start here because even if we set | |
| 162 the direction we always want the icon on the same side | |
| 163 */ | |
| 164 padding-right: 0; | |
| 165 } | |
| 166 | |
| 167 html[dir=rtl] .thumbnail-container > .title > div { | |
| 168 background-position-x: 100%; | |
| 169 padding-left: 0; | |
| 170 padding-right: 20px; | |
| 171 text-align: right; | |
| 172 } | |
| 173 | |
| 174 .thumbnail { | |
| 175 border: 3px solid hsl(213, 63%, 93%); | |
| 176 padding: 1px; | |
| 177 border-radius: 5px; | |
| 178 display: block; | |
| 179 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); | |
| 180 -webkit-transition: width .15s, height .15s, border-color .15s, | |
| 181 border-top-left-radius .15s, border-top-right-radius .15s, | |
| 182 -webkit-box-shadow .15s; | |
| 183 } | |
| 184 | |
| 185 .edit-mode-border { | |
| 186 border-radius: 4px; | |
| 187 | |
| 188 /* when dragged over we move this */ | |
| 189 position: relative; | |
| 190 -webkit-transition: top .15s, left .15s; | |
| 191 } | |
| 192 | |
| 193 .thumbnail-container:focus .thumbnail, | |
| 194 .thumbnail-container:hover .thumbnail { | |
| 195 border-color: hsl(213, 66%, 57%); | |
| 196 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); | |
| 197 border-top-left-radius: 0; | |
| 198 border-top-right-radius: 0; | |
| 199 | |
| 200 background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0), | |
| 201 hsla(0, 0%, 47%, 0) 85%, | |
| 202 hsla(0, 0%, 47%, 0.2)); | |
| 203 | |
| 204 /* delay border radius transition as much as the edit bar slide delay */ | |
| 205 -webkit-transition-delay: 0, 0, 0, .5s, .5s, 0; | |
| 206 } | |
| 207 | |
| 208 .thumbnail-container:focus > .edit-mode-border, | |
| 209 .thumbnail-container:hover > .edit-mode-border { | |
| 210 background-color: hsl(213, 66%, 57%); | |
| 211 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); | |
| 212 } | |
| 213 | |
| 214 .dragging, | |
| 215 .dragging * { | |
| 216 -webkit-transition: none !important; | |
| 217 } | |
| 218 | |
| 219 .dragging > .title { | |
| 220 opacity: 0; | |
| 221 } | |
| 222 | |
| 223 @-webkit-keyframes 'fade-in' { | |
| 224 0% { | |
| 225 opacity: 0; | |
| 226 } | |
| 227 | |
| 228 100% { | |
| 229 opacity: 1; | |
| 230 } | |
| 231 } | |
| 232 | |
| 233 .fade-in { | |
| 234 -webkit-animation: 'fade-in' .15s; | |
| 235 } | |
| 236 | |
| 237 @media (max-width: 940px) { | |
| 238 #most-visited-maxiview { | |
| 239 height: 294px; | |
| 240 } | |
| 241 | |
| 242 .thumbnail, | |
| 243 .thumbnail-container > .title { | |
| 244 width: 150px; | |
| 245 height: 93px; | |
| 246 } | |
| 247 | |
| 248 .thumbnail-container > .title { | |
| 249 height: auto; | |
| 250 } | |
| 251 | |
| 252 .thumbnail-wrapper { | |
| 253 background-size: 150px 93px; | |
| 254 } | |
| 255 } | |
| 256 | |
| 257 #most-visited-settings { | |
| 258 position: absolute; | |
| 259 top: 1px; | |
| 260 right: 0; | |
| 261 border: 0; | |
| 262 cursor: pointer; | |
| 263 font-size: 70%; | |
| 264 margin: 0; | |
| 265 padding: 0; | |
| 266 text-decoration: underline; | |
| 267 visibility: hidden; | |
| 268 -webkit-padding-start: 3px; | |
| 269 z-index: 3; | |
| 270 } | |
| 271 | |
| 272 html[dir=rtl] #most-visited-settings { | |
| 273 left: 0; | |
| 274 right: auto; | |
| 275 } | |
| 276 | |
| 277 #most-visited:not(.collapsed) #most-visited-settings.has-blacklist { | |
| 278 visibility: visible; | |
| 279 } | |
| OLD | NEW |