Skip to content

Flickr WideScreen - Notification BIG Image v.248 by decembre

Imported from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/227781.user.css

Screenshot of Flickr WideScreen - Notification BIG Image v.248

Details

Authordecembre

LicenseNo License

CategoryFlickt, Wide Screen,

Created

Updated

Size46 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

For A WIDE SCREEN (1920x1080)....
For the New Flickr's Notification System:
It Give the Focus to the shot concerned by the Notification.

Notes

NOTES (2023.08):

  • Updated ONLY on Userstyles.world (USw) and GreasyFork:
    Usersytles.org is broken for me (their new design don't permit Login! - request done 2023.08)

Show a BIG Image in each notification: It sit hover the info.

These info are shown on hover the notification and the image move to the left side.
An "Eye" icon is added too:On hover this icon, you can show a preview of it, if you use add on for that, like:

LAST Changes:

Notes:
►► Find all my Userstyles for Flickr in different places.

A - decembre [userstyles.world - USw]:
The best alternative (faster) to the - now buggy - Userstyles.org.
A new place to share our userstyles, provided by very good devs !

And as Userscripts Install (with "Greasemonkey" / "Tampermonkey" addons)
or UserCSS (Install with "Stylus")n:
B - decembre [GreasyFork]

C - decembre [UserStyles.org Archive]
Archived Mirror of Userstyles.org.
Should be become inaccurate, if we can't update our userstyles in userstyles.org.

And, but actually, Not Updated (Userstyles.org Broken - 2023.08):
D - decembre (UserStyles.org):
Traditional place to share our userstyle... but became worst now (Impossible to login).

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Flickr WideScreen - Notification BIG Image v.248 (USw)
@namespace      USO Archive
@author         decembre
@description    For  A WIDE SCREEN (1920x1080)....For the New Flickr's Notification System:It Give the Focus to the shot concerned by the Notification.Show a BIG Image in each notification:It sit hover the infos.These infos are shown on hover the notification and the image move to the left side.An "Eye" icon is added too:On hover this icon, you can show a preview of it, if you use add on for that, like:
- <a href="https://addons.mozilla.org/fr/firefox/addon/imagus/">Imagus</a>
- <a href="https://addons.mozilla.org/fr/firefox/addon/image-max-url/">Image Max URL</a>
@version        248.05
@license        NO-REDISTRIBUTION
==/UserStyle== */

@-moz-document domain("flickr.com") {

/* === FLICKR - 00 - Flickr WideScreen - Notification BIG Image (Photo Page) - v.248.5 (new24805) (USw) (new223COM)=== */

/* (new26) NEW NOTIF PAGE - BIG IMAGE - OTHER USER REAL NAME - INDICATOR */
html.fluid.html-notification-center-page-view .notification-center-page-view .notification-item .notification-photo-thumb:not([href*="/galleries/"]):first-of-type:before {
    content: attr(href) !important;
    position: absolute !important;
    display: inline-block !important;
    width: auto !important;
    height: 15px  !important;
    line-height: 15px  !important;
    top: -0.5vh !important;
    left: -118px !important;
    padding: 1px 0px  !important;
    font-size: 12px  !important;
    white-space: nowrap !important;
    opacity: 0.4 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    clip-path: inset(0px 66px 0px 44px) !important;
color: silver  !important;
background: #111 !important;
}
/* HOVER - BIG IMAGE - OTHER USER REAL NAME - INDICATOR */
html.fluid.html-notification-center-page-view .notification-center-page-view .notification-item .thumb-container a.notification-photo-thumb:not([href*="/galleries/"]):first-of-type:hover:before {
    content: attr(href) !important;
    position: absolute !important;
    display: inline-block !important;
    width: auto !important;
    height: 15px  !important;
    line-height: 15px  !important;
    top: -0.5vh !important;
    left: -118px !important;
    padding: 1px 0px  !important;
    font-size: 12px  !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    clip-path: inset(0px 66px 0px 44px) !important;
    z-index: 500000 !important;
color: gold  !important;
background: #111 !important;
}

/* (new187) THUMB  - SMALL on HOVER  :not([class*="group"]) .notification-item */
.notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-reply-new):not(.notif-item-group-topic-new):not(.notif-item-group-description):not(.notif-item-group-rules):not(.notif-item-group-join-request):not(.notif-item-group-invite) .thumb-container ,
.fluid.html-photo-page-scrappy-view.scrolling-layout .notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-reply-new):not(.notif-item-group-topic-new):not(.notif-item-group-description):not(.notif-item-group-rules):not(.notif-item-group-join-request):not(.notif-item-group-invite) .thumb-container {
    position: relative !important;
    display: inline-block !important;
    width: 265px !important;
    height: 102px !important;
    margin-left: -280px !important; 
    top: 2px !important;
background: rgba(0, 0, 0, 0.79) !important;
/* border: 1px solid violet !important; */
}
.notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:hover:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-reply-new):not(.notif-item-group-topic-new):not(.notif-item-group-description):not(.notif-item-group-rules):not(.notif-item-group-join-request):not(.notif-item-group-invite) .thumb-container ,
.fluid.html-photo-page-scrappy-view.scrolling-layout .notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:hover:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-reply-new):not(.notif-item-group-topic-new):not(.notif-item-group-description):not(.notif-item-group-rules):not(.notif-item-group-join-request):not(.notif-item-group-invite) .thumb-container {
    position: relative !important;
    display: inline-block !important;
    width: 65px !important;
    height: 65px !important;
    margin-left: -327px !important; 
    top: 40px !important;
overflow: visible !important;
outline: none !important;
}
.notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb ,
.fluid.html-photo-page-scrappy-view.scrolling-layout .notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb{
    display: inline-block !important;
    height: 100px !important;
    width: 90px !important;
margin-left: 80px !important;
transition: margin ease 0s !important;
/* border: 1px solid gray !important; */
}
.notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:hover:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb ,
.fluid.html-photo-page-scrappy-view.scrolling-layout .notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:hover:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb {
    display: inline-block !important;
    height: 60px !important;
    width: 60px !important;
margin-left: 0px !important;
transition: margin ease 0.2s !important;
overflow: visible !important;
/* border: 1px solid gray !important; */
}

/* (new187) INDICATOR */
.fluid.html-photo-page-scrappy-view .notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb ,
.fluid.html-photo-page-scrappy-view .notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb{
/* border: none !important; */
/* border: 1px solid yellow !important; */
/* outline: none !important; */
}

.notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:hover:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb:after ,
.fluid.html-photo-page-scrappy-view.scrolling-layout .notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:hover:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb:after {
content: "👁‍" !important;
/* position: fixed !important; */
    display: inline-block !important;
    height: 15px !important;
    line-height: 15px !important;
    width: 255px !important;
margin-left: 68px !important;
margin-top: 48px !important;
/* transition: margin ease 0.2s !important; */
text-align: center !important;
z-index: 5000000 !important;
background: rgba(0, 0, 0, 0.10) !important;
border: none !important;
outline: none !important;
}
.fluid.html-photo-page-scrappy-view.scrolling-layout .notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:hover:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .thumb-container a.notification-photo-thumb:hover:after {
    height: 30px !important;
    line-height: 30px !important;
margin-top: 38px !important;
    font-size: 30px !important;
background: rgba(0, 0, 0, 0.8) !important;
}

.base-notification-item .notification-item:hover:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-invite) .notification-item-middle .notification-core .headline-container a:hover {
    display: inline-block !important;
z-index: 5000000 !important;
color: #A6F5A5 !important;
}

/* (new188) */
.notifications-panel-view .view.notifications-list-view:first-of-type .notifications-list ul.notification-item-list .notification-item:not(.notif-item-contacted):not(.notif-item-group-photo-request):not(.notif-item-group-reply-new):not(.notif-item-group-topic-new):not(.notif-item-group-description):not(.notif-item-group-rules):not(.notif-item-group-join-request):not(.notif-item-group-blast):not(.notif-item-group-invite):not...

Reviews

No reviews yet.