/* Most Visited */ #most-visited-maxiview { position: relative; height: 366px; -webkit-user-select: none; } .thumbnail-container { position: absolute; color: hsl(213, 90%, 24%); text-decoration: none; -webkit-transition: left .15s, right .15s, top .15s; text-decoration: none; } .thumbnail-container:focus { outline: none; } .thumbnail, .thumbnail-container > .title { width: 207px; /* natural size is 196 */ height: 129px; /* 136 */ -webkit-transition: width .15s, height .15s; } .thumbnail-container > .title { line-height: 16px; height: 16px; margin: 0; margin-top: 4px; font-size: 100%; font-weight: normal; padding: 0 3px; opacity: 1; -webkit-transition: opacity .15s, width .15s; color: black; } .thumbnail-wrapper { display: block; background-size: 212px 132px; background: no-repeat 4px 4px; background-color: white; border-radius: 5px; -webkit-transition: background-size .15s; position: relative; } .filler * { visibility: hidden; } .filler { pointer-events: none; } .filler .thumbnail-wrapper { visibility: visible; border: 3px solid hsl(213, 60%, 92%); } .filler .thumbnail { visibility: inherit; border: 1px solid white; padding: 0; background-color: hsl(213, 60%, 92%); } .edit-bar { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: stretch; padding: 3px; padding-bottom: 0; height: 17px; /* 23 - 2 * 3 */ cursor: move; font-size: 100%; line-height: 17px; background: hsl(213, 54%, 95%); border-top-left-radius: 4px; border-top-right-radius: 4px; position: relative; margin-top: 21px; margin-bottom: -21px; -webkit-transition: margin .15s, background .15s; } .edit-bar > * { display: block; position: relative; } .thumbnail-container:focus .edit-bar, .thumbnail-container:hover .edit-bar { margin-top: 0; margin-bottom: 0; -webkit-transition-delay: .5s, 0s; /* We need background-color as well to get the fade out animation correct */ background-color: hsl(213, 66%, 57%); background-image: -webkit-linear-gradient(hsl(213, 87%, 67%), hsl(213, 66%, 57%)); } .edit-bar > .spacer { -webkit-box-flex: 1; } .edit-bar > .pin, .edit-bar > .remove { width: 16px; height: 16px; cursor: pointer; background-image: no-repeat 50% 50%; } .edit-bar > .pin { background-image: url('ntp_pin_off.png'); } .edit-bar > .pin:hover { background-image: url('ntp_pin_off_h.png'); } .edit-bar > .pin:active { background-image: url('ntp_pin_off_p.png'); } .pinned .edit-bar > .pin { background-image: url('ntp_pin_on.png'); } .pinned .edit-bar > .pin:hover { background-image: url(ntp_pin_on_h.png'); } .pinned .edit-bar > .pin:active { background-image: url(ntp_pin_on_p.png'); } .edit-bar > .remove { background-image: url('ntp_close.png'); } .edit-bar > .remove:hover { background-image: url('ntp_close_h.png'); } .edit-bar > .remove:active { background-image: url('ntp_close_p.png'); } .thumbnail-container > .title > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: no-repeat 0 50%; background-size: 16px; padding-left: 20px; /* we cannot use padding start here because even if we set the direction we always want the icon on the same side */ padding-right: 0; } html[dir=rtl] .thumbnail-container > .title > div { background-position-x: 100%; padding-left: 0; padding-right: 20px; text-align: right; } .thumbnail { border: 3px solid hsl(213, 63%, 93%); padding: 1px; border-radius: 5px; display: block; -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); -webkit-transition: width .15s, height .15s, border-color .15s, border-top-left-radius .15s, border-top-right-radius .15s, -webkit-box-shadow .15s; } .edit-mode-border { border-radius: 4px; /* when dragged over we move this */ position: relative; -webkit-transition: top .15s, left .15s; } .thumbnail-container:focus .thumbnail, .thumbnail-container:hover .thumbnail { border-color: hsl(213, 66%, 57%); -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); border-top-left-radius: 0; border-top-right-radius: 0; background-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0), hsla(0, 0%, 47%, 0) 85%, hsla(0, 0%, 47%, 0.2)); /* delay border radius transition as much as the edit bar slide delay */ -webkit-transition-delay: 0, 0, 0, .5s, .5s, 0; } .thumbnail-container:focus > .edit-mode-border, .thumbnail-container:hover > .edit-mode-border { background-color: hsl(213, 66%, 57%); -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); } .dragging, .dragging * { -webkit-transition: none !important; } .dragging > .title { opacity: 0; } @-webkit-keyframes 'fade-in' { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-in { -webkit-animation: 'fade-in' .15s; } @media (max-width: 940px) { #most-visited-maxiview { height: 294px; } .thumbnail, .thumbnail-container > .title { width: 150px; height: 93px; } .thumbnail-container > .title { height: auto; } .thumbnail-wrapper { background-size: 150px 93px; } } #most-visited-settings { position: absolute; top: 1px; right: 0; border: 0; cursor: pointer; font-size: 70%; margin: 0; padding: 0; text-decoration: underline; visibility: hidden; -webkit-padding-start: 3px; z-index: 3; } html[dir=rtl] #most-visited-settings { left: 0; right: auto; } #most-visited:not(.collapsed) #most-visited-settings.has-blacklist { visibility: visible; }