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 } 280