Skip to content

Flickr Widescreen (Part 1) v.291 (USw) by decembre

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

Screenshot of Flickr Widescreen (Part 1) v.291 (USw)

Details

Authordecembre

Licenseunlicense

Categoryflickr, widescreen, wide screen, darck and gray

Created

Updated

Size698 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

It's ONLY for a WIDESCREEN(1920x1080)!
► The Goal: use at its maximum my WideScreen:

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)

▶ LAST updates Infos:
[userstyles] "Flickr WideScreen & BigONE" [in Flickr Hacks pool]

========================================
►► What This Userstyle Change ? :

Some special advantages are offer by this Userstyle:

► Hidden Flickr Nav bar:
Hide the Top Nav Bar until you hover the Litlle Red Arrow ( at the middle/ top).
or the MAIL Alert Envelope Icon with the number of Mails Waiting (Appear only if you receive a mail...)

►► PHOTO Page Very Clear:
The Place for the photo is big (Heavy Use of Hover...).
All is visible in the windows without scrolling.
Infos / Actions are moved on Right Side of the Photo:

  • Left Side: 2/3 space for the Photo or Video
  • Right Side: 1/3 space for Infos and Actions.

- PHOTO Title on Top, Description stay at the bottom (hidden until you hover an arrow)
- Comment Form moved Right Side, Near User Avatar.
- Comments are hidden and visible until you hover the "Comment Icon" near the Comment Form.
They are shown by an overlay on the picture. A Comment counter is added to know where you are... .
- Reverse order in Photo page for:
Comments and Favorits user list

  • Polls / Sets / Favs List: Counter, Scrollable , and compacted (Use Hover if too long).
  • Panels "People in this Photo", "Tags" and "About Flickr": Moved at the bottom of the page (visible on hover too).

Alternative to the Justified in the ARCHIVES pages:
Show the Hidden Options Bar.
So, Now you can chose the ARCHIVES Thumbnail size (Square - Small - Madium - Large)

Thumbnail Zoom Plus facility:
Always maintain the capacity to use Thumbnail Zoom Plus, Firefox Addon and see the larger Photo.

All "too flashy" Generics Buddy User Icons are muted :
Styled to be gray by a grayscale filter

►► Others Pages:
- All Thumbnails (Small and Justified): Total restyle
- Justified View :
. Row counter.
. Pagination Vertical on the left side.

Many small adaptations are done in many part of Flickr Pages....
You need to test it !

►► Find all my Userstyles for Flickr in different places:
A - decembre (UserStyles.org):
Traditional place to share our userstyle... but became worst now (slower).

B - 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 !

C - decembre [UserStyles.org Archive]
Archived Mirror of Userstyles.org

And as Userscripts /UserCSS on:
D - decembre [GreasyFork]

▶ My 3 principals "Flickr WideScreen ALLinONE" userstyles:
- Flickr WideScreen (Part 1):
the first and principal to install
- Flickr WideScreen (Part 2):
Adaptation for GM (Adaptation for some great Userscripts i use a lot , since a long time...),
and Additional styles for some some unused pages.
- - Flickr WideScreen - Dark & Grey

►► You should install these 3 userstyles together, for a better results.

► To install them all at once:
- Flickr WideScreen - BigONE [userstyles.world - USw]
Or as userscript or Userstyles:
Flickr WideScreen - BigONE [GreasyFork]
About this new function in GreasyFork, read:
[Beta] User CSS support

► For Better result you need to use dark and minimal scrollbars with it ("minimal" because without it, some scrolling list can lost columns):
For Firefox Quantum / Chrome (with Stylus):
Overlay Scrollbars - easy customizable
For Waterfox "Classic" 56:
My Firefox - Slim Dark Scrollbar

► Better with Addon for images preview:
- Thumbnail Zoom Plus, Firefox Addon par David Adler (support discontinued) :
Shows full image when you hover over a thumbnail.
But you can use too (same usage):
- Imagus
- Image Max URL

Notes:
► Rework of the Photo page (Right side reorganized and aligned)
► (08.09.2021) - Add support to the New Notification System (work in progress...):
Ramping New Flickr Notifications Center and Settings to all members.

► Fight these New Flickr Adds (2020):
- With Chrome and Firefox Quantum:
Use uBlock Origin by Raymond Hill

- Waterfox Classic you need too:
Scriptlet Doctor
Read:
uBlockOrigin - Del "Upgrade to Flickr Pro to hide these ads" (with Addon "Scriptlet Doctor")

► You can test too my other Usertyles (Many are better for A WIDE SCREEN (1920x1080)!):

► Better with them - Useful greasemonkey companions (write by me):
- Flickr - AUTO ShowAllGroups (Photo Page)
- Flickr - AUTO More Comments
- Flickr - AUTO Video Play
- Flickr - AUTO Video Replay
- Flickr - AUTO More Mini Thumbnail:
This script move the Mini-thumbnail under the user buddy icon and expand it on hover while it auto load more thumbnail in it.
An indicator show the origin of the mini-thumbnail:

  • Stream
  • Favs etc...
    I use it always to navigate in stream, favs etc.... from Photo page.

► Greasemonkey's Scripts that i use a lot too:
- Flickr ★ Surf (USO Mirror)
► Scripts Broken? read :
Photopage scripts broken (HTTPS?)
▶ You Can Find Many Other Updated Infos About Flickr Extensions / Userscripts / Userstyles / Applications..
In :

► My BIG List (After New Photo Page Design (2014)) - Updated 2020.

► Addon for images preview:
- Thumbnail Zoom Plus, Firefox Addon par David Adler (support discontinued) :
Shows full image when you hover over a thumbnail.
But you can use too (same usage):
- Imagus
- Image Max URL

Or an userscript:

  • Picviewer CE+
    "Powerful picture viewing tool online, which can popup/scale/rotate/batch save pictures automatically"

▶ Last Changes in v.242:

  • Photo Page corrections for Photo Editor and other things.
  • Adaptation for "New design" for Photo page (2nd round!).
    Add support for the Comments List in Modal.
  • Adaptation for:
    [Acknowledged by Flickr Staff] NEW feature? Both date taken and uploaded now showing on photo page
  • SUPP NEW Pubs in Photop pages and Search
  • Fix Modal popups (less sensitive to the viewport)
  • Search: Show "Print Shop" on Hover.
    read:
    Can you disable "from the print shop" in searches?
  • Some Code are moved from Part1 to Part 2 (here) due Userstyle.org limit (on Userstyles World there is not limit, but ... )
  • Adaptation to the new "Version History" introduce by Flickr
  • Adaptation to the NEW Search Sidebar (Oct 2022):
    Visible on arrow on Top/Right.
    and fine tuning the Search pages
  • Adaptation for new Code Change in Photo Page (2020.06.11):
    .".photo-notes-scrappy-view-OLD" revert to "photo-notes-scrappy-view"
    ".photo-well-scrappy-view-OLD" revert to ".photo-well-scrappy-view"
  • Settings apges, Photo Page: Notes, all popups and rework general
  • Rework Slide Show
  • Change the Userstyle Name
  • Adaptation for Flickr change (11.2021):
    New function? - User info Modal on hover the user buddy icon (On photo page )
  • Galleries - OLD View before 2018 (seems broken now...):
    https://www.flickr.com/help/forum/en-us/72157720068442958/#reply72157720081770587
  • Add Support The New Notification System (work in progress...):
    Ramping New Flickr Notifications Center and Settings to all members.
  • Safety Level indicator (on top near buddy icon)
  • Fav Star - rework (Flat style: Not the NEW ugly animation)
  • Improve the Pool Beta and No Beta pages
  • Photo page: Comment Form Enlarge (height on hover) + Emoji Comments
  • Map indicator in Photo Page.
  • Add a Dark Minimal style for readability (but it's better to use my :
    Flickr WideScreen - Dark & Grey
    (you can remove it - Top of my CSS - if you don't like)
  • General Corrections (last one in first):
    Forum Help, Photo / Buddy Icon Editor, All Modal popups, Title/Description Editor, "Add to Pool/ Gallery" (with click on "+" icon), Mini Thumbnail in photo page, Top header improve, Pool Discussion / Help Forum, no ADS in Photo page ...... etc .

▶▶ Find my others Userstyles here - Many for Flickr:

Decembre on UserStyles.world[USw]
A New site to post our Userstyles - faster and not buggy!

  • USO Archives.
    Note: Should become outdated if i can't update my userstyles in Userstyles.org:

Decembre [UserStyles.org Archive - USO Archives]

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 (Part 1) v.291 (USw) - NORMAL NO BETA/BETA 
@namespace   flickr.com
@version     291.0
@author      decembre
@description Flickr using at its maximum a WideScreen
@license     unlicense
==/UserStyle== */

@-moz-document domain("flickr.com"), domain("na.ads.yahoo.com"), domain("combo.staticflickr.com") {


/* ====  A - FLICKR - 0 - Flickr WideScreen(Part 1) v.291 (new291) - 2nd ABORTED NEW PHOT DESIGN  (JUnew) - POOL no BETA REWORK - NORMAL NO BETA/BETA  [A VOIR] ===== */


/* TEST - WIDE */

html.styleguide body #pool-photos.photo-display-container.ju ,
html.styleguide body.super-liquid #pool-photos.photo-display-container.ju {
    width: 100% !important;
    min-width: 99vw !important;
    max-width: 99vw !important;
    height: auto !important;
    overflow: hidden !important;
    overflow-y: auto !important;
}
html.styleguide body.super-liquid #pool-photos.photo-display-container.ju #photo-display-container ,
html.styleguide body #pool-photos.photo-display-container.ju #photo-display-container {
    width: 100% !important;
    min-width: 99vw !important;
    max-width: 99vw !important;
    height: auto !important;
    overflow: hidden !important;
    overflow-y: auto !important;
}
body.new-footer.new-footer-tight-ass #main, 
body.new-footer.new-footer-tight-ass #Main {
    margin: 0 0 0 0 !important;
}

/* MODAL - ADD PEOPLE TAGS */
.sub-photo-add-tags-view.flickr-view-root-view{
    height: 100%;
    border-radius: 5px  !important;
border: 1px solid red!important;
}
.tags-selection-list-view .tags-selection-list-container {
    height: 100%;
    min-height: 50vh !important;
    max-height: 50vh !important;
    overflow: auto;
    border-bottom: 1px solid #cfd6d9;
}
.tags-selection-list-view .tags-selection-list-container .tags-selection-list li {
    float: left !important;
    clear: none  !important;
    width: 48% !important;
    margin: 0 0 3px 2px !important;
}
.tags-selection-list-view .tags-selection-list-container .tags-selection-list li .tag-content .name-info {
    display: flex;
    flex-direction: column;
    max-height: 4vh !important;
    overflow: hidden !important;
    overflow-y: auto !important;
}

/* TAGS SELEcTED */
.machine-tags-list + .tags-selection-list{
    background: green !important;
}
.manage-link-container a{
    color: peru !important;
}
.selection-search-container {
    color: silver !important;
    background: #111 !important;
}
.selection-search-container::before {
    width: 22px !important;
    height: 22px !important;
    opacity: 0.8 !important;
background: #222  url("https://combo.staticflickr.com/ap/build/images/sprites/icons-87310c47.png") no-repeat scroll -315px -231px !important;
}
.tags-selection-list-view .tags-selection-list-container .tags-selection-list li:nth-child(odd){
    background: #222 !important;
}
.tags-selection-list-view .tags-selection-list-container .tags-selection-list li:nth-child(even){
    background: #111 !important;
}

/* (new225COM) ERRORS PAGES - CLICK MORE BUT GO TO EXPLORE PAGES */
/* ERROR 403 */
.fluid.html-fluid-error-page-view.scrolling-layout{
    height: 99.8vh !important;
    margin: 0 0 0 0 !important;
    overflow: hidden !important;
}
.fluid.html-fluid-error-page-view.scrolling-layout .fluid-error-page-view {
    height: 99.8vh !important;
    margin: 0 0 0 0 !important;
    overflow: hidden !important;
}
.fluid.html-fluid-error-page-view.scrolling-layout  .fluid-centered {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}
.fluid-error-page-container.message.is-http-403 ,
.fluid-error-page-view section {
    margin: 1rem 0;
}
.fluid-error-page-view section.contextual-suggestions {
display: inline-block !important;
    height: 70vh !important;
    overflow: hidden !important;
    overflow-y: auto !important;
}

.fluid-error-page-view section.contextual-suggestions > .photo-list-view {
    text-align: center !important;
    height: 70vh !important;
    padding: 0 10% !important;
    overflow: hidden !important;
    overflow-y: auto !important;
}
.fluid-error-page-view section .photo-list-photo-view {
    position: relative  !important;
    display: inline-block !important;
    height: 125px !important;
    margin: 5px !important;
    background-position: 50% center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: unset !important;
}

/* ERROR - MORE BUT */
.fluid-error-page-view section.contextual-suggestions > .butt {
    position: absolute !important;
    margin: 0rem 0 0 -120px !important;
    bottom: 6vh !important;
}
.fluid-error-page-view section.contextual-suggestions > a.butt:after {
    content: ":  ▶ Explore" !important;
}

/* TEST SCROLLBAR HIDDEN - scrollbar-width: none,  - WORK ONLY ON TOP HTML / OR IFRAME ?  */
html.styleguide body {
    position: relative;
    display: inline-block !important;
    box-sizing: border-box;
    padding:  0 0 0 0 !important;
    min-height: 100%;
    height: auto !important;
overflow-x: hidden !important;
/*   scrollbar-width: none !important; */
/* overflow: -moz-scrollbars-none !important; */
/* scrollbar-width: unset !important; */
}

/* SUPP PUBS / GEO YAHOO / SPONS ETC... */

/* (new218) NEW PUBS */
/* MOOOLA = Pépétes / somme d'argent
https://dictionnaire.reverso.net/anglais-francais/moola
=== */

/* SUPP - PB PHO COMMENTS */
/* .fluid.html-photo-page-scrappy-view .photo-page-scrappy-view section> [class*="view"] , */

/* SUPP - PHOT */
.photo-list-getty-item-view  ,
.loading-text ,
.fluid.html-photo-page-scrappy-view body script + .fluid-droparound-view + .fluid-droparound-overlay.transparent  + .fluid-droparound-view + .fluid-droparound-view ,
.sub-photo-content-container > .sub-photo-right-view > div:not([class*="sub-photo-"]):not(.photo-charm-exif-scrappy-view) ,
.fluid.html-photo-page-scrappy-view .photo-page-scrappy-view section nav > [class*="view"] ,
.with-emoji-picker .attach-to-input .upward-arrow ,
#comments .adding-comment .html-info-trigger ,
#comments #reply.comment-block .comment-icon ,
.html-photo-page-scrappy-view .gift-pro-view ,
.photo-page-i-m-container, 
.photo-page-i-m-container .upgrade-to-pro-cta, 
.photo-page-m-container, 
.photo-page-m-container .upgrade-to-pro-cta ,

/* OTHERS */
div[class*="-moola-"] ,
.photo-list-view .photo-list-moola-item-view ,

.photo-charm-exif-scrappy-view + div:not([class^="view sub-photo-"]) ,

summary ,
.sub-photo-right-view summary ,
.fluid.html-search-photos-unified-page-view #content  .search-tools-view + .requiredToShowOnServer[class*="view"] ,

.getty-widget-view ,
.getty-search-widget-view ,
.sub-photo-container.centered-content .getty-photopage-view ,

/* SUPP -PHO - FAVE RED */
.sub-photo-left-view > .sub-photo-fave-view.faves-present .ui-icon-fave-star ,
.photo-engagement-view .fave-view a.fave-star.false.is-faved svg.icon-fave , 
.photo-engagement-view .fave-view a.fave-star.is-faved svg.icon-fave ,
.view.photo-engagement-view .view.fave-view .fave-star.false .icon-fave_hollow ,
.photo-engagement-view .fave-view a.fave-star.false.is-faved svg.icon-fave_hollow ,

#global-nav #gb-ac-wrap.droparound-with-storage #gb-ac-panel .pro-hook-container ,
.NoneFound .SortOptions  ,
.sub-photo-tags-people-view .c-contact-search-autocomplete .contact-list + input.add-person  +   .contact-autocomplete-arrow ,
.feed-rail-view .feed-rail .feed-rail-content-container .rail-items-container .rail-item.flat ,
.photo-page-leader-moola-view ,
.moola-sticky-view ,
.footer-full-view .foot-banner-container.fixed ,

#testimonials .avatar.person.small>span ,
.cookie-banner-reg ,

.sub-photo-left-view > .sub-photo-fave-view i ,
.ForumPost + br ,
#Main > .TopicListing[cellspacing="0"]:not(.PeopleResults):not(#Photo) tr:last-of-type  td + td > a.pro-badge-new svg ,

.ad-card ,
.New ,
.html-feed-new-page-view .feed-b ,
.feed-page-view .feed .moola-card ,
.feed-page-view .feed-b, 
.feed-page-view .feed-b .upgrade-to-pro-cta, 

.activity-card.ad-card.pro-upsell-card ,
a[href="/account/upgrade/pro"] ,
.ad-card ,
.html-feed-new-page-view .feed-b ,
.sub-photo-left-view > .sub-photo-fave-view.faves-present svg.icon ,
.opt-out-widget .feedback ,
.opt-out-widget .optout-toggle .divider ,
.optout-toggle>a ,
.fluid.html-group-home-page-view .fluid-droparound-overlay ,

.main.moola-search-div ,
.signup-footer ,
.photo-page-lightbox-scrappy-view .photo-well-view.enable-zoom .facade-of-protection-neue, 
.photo-page-lightbox-scrappy-view .photo-well-view.dark.enable-zoom .facade-of-protection-neue  ,

#group-sidebar .pending.sec h3.group-subhead ~ p ,

#foot ,

.view.old-magic-email-banner-view ,
.modal.html-modal[style="top: 50%; left: 50%; margin-top: -218.5px; margin-left: -300px; max-height: inherit; max-width: inherit; overflow: visible;"] ,
.nav-banner-container ,
.featured-toast-view .featured-toast ,
.featured-toast-view.activated ,
#Hint img ,
#invites-and-comments div#comments div#comments-list ol#photo-activity.mixed li.comment-block.comment-deleted ,
#pool-photos.ju[style^="padding-left: 345px;"] .row:empty ,
#pool-photos.sm .photo-display-item:hover .remove-from-group img ,
.TopicReply td h3 ,
.sn-navitem>span>br ,
#you-subnav-more-butt ,
ul.sn-dropdown .sn-dropdownitem.sn-divider ,
.subnav-refresh .sn-avatar.sn-avatar-size-0 img.sn-avatar-ico,
.subnav-refresh .sn-avatar.sn-avatar-size-48 img.sn-avatar-ico,
.subnav-refresh .sn-avatar.sn-avatar-size-60 img.sn-avatar-ico,
.subnav-refresh .sn-avatar.sn-avatar-size-100 img.sn-avatar-ico ,
.photo-display-item .play ,
.spaceball ,
.fluid.html-favorites-page-view .footer-full-view ,

.zoom-modal .zoom-photo-container .facade-of-protection-zoom  ,
.photo-well-scrappy-view .height-controller .photo-well-media-scrappy-view-OLD > .facad...

Reviews

No reviews yet.