Flickr WideScreen (Viewer) - FlickRiver v.9 by decembre

Imported from https://cdn.jsdelivr.net/gh/33kk/uso-archive@flomaster/data/usercss/126659.user.css

Flickr WideScreen (Viewer) - FlickRiver v.9 screenshot
Install Get Stylus Write a review

Details

Authordecembre

LicenseNO-REDISTRIBUTION

Created atApril 09, 2021 21:37

Updated atAugust 25, 2021 23:00

Applies toflickriver, widescreen, flickr

Statistics

Learn how we calculate statistics in the FAQ.

Total views146

Total installs65

Weekly installs4

Weekly updates1

Description

▶ WIDE style For Flickriver
▶ It’s for a WIDESCREEN(1920x1080)!

Less Scrolling:
Thumbnail fit your large screen…

You can use it with:
Thumbnail Zoom Plus
▶Flickr PM :
my TWEAK Script : Icons/new links for “flickr PM”

Notes

WHAT IT do :
For a less scrolling experience,
it provide Smaller Thumbnails which fit All the screen:
- Each row display 2x4 thumbs.
- Show a Counter for each original row, so tou know where you are……

To use with:
Thumbnail Zoom Plus
Add compatibility with this addon (now you can preview the thumb on hover) :
(Shows full image when you hover over a thumbnail.)

> Change in v.9:
- Better loading when only one row.
Test link:
FlickRiver: .ruzz
- Auto loading work fine now….
- Better “Large” and “Fit Scale” views;
- Add indicator for visited images ( need you keep history in your browser settings)
===============
It’s a part of my “Flickr WideScreen Collection”.

▶ My Flickr ALLinONE styles:
- Flickr Widescreen - ALLinONE (Part 1):
the first and principal to install
- Flickr Widescreen - ALLinONE (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

► So far, you should install these 3 userstyles for a better results.

►To install Userstyles (CSS customization) :
Stylish
or better now:
Stylus, Easily install themes and skins for many popular sites [all Browsers Addons]
Stylus Addons).


► To install them all at once, as userscript or Userstyles, a new alternative (in test yet, less updated…) :
Flickr WideScreen Dark and Grey - BigONE - TEST UserCSS style + JS
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


► These Styles are better with this Useful Addon to preview thumbnail on hover:
Thumbnail Zoom Plus


► You can test too my other Usertyles (Many are better for A WIDE SCREEN (1920x1080)!):
- [NEW] For Favorites pages ( v.1 02.06.2020):
Flickr WideScreen - ALLinONE - Favorites Small
- For Flickr Viewers :
Flickr WideScreen (Viewers) - DACKR Viewer
Flickr WideScreen (Viewer) - FlickRiver
Flickr WideScreen (Viewers) - FlickrHiveMind

▶ You Can Find Many Other Updated Infos About Flickr Extensions / Userscripts / Userstyles / Applications..
In :
► My BIG List (After New Photo Page Design (avr 2015)) - Updated 2020.

I have Updated all links from userscripts.org (defunct) ,
to point now to userscripts-mirror.org (Archives))
.

History

Daily snapshots of style statistics.

2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.000.501.001.502.002.503.003.504.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-07-212021-08-032021-08-172021-08-302021-09-122021-09-262021-10-092021-10-222021-11-052021-11-182021-12-01Date0.0019.0038.0057.0075.0094.00113.00132.00150.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           Flickr WideScreen (Viewer) - FlickRiver v.9
@namespace      USO Archive
@author         decembre
@description    `▶ WIDE style For <a href="https://www.flickr.com/services/apps/72157602046337717/"><b>Flickriver</b></a> ▶ It's for a WIDESCREEN(1920x1080)!Less Scrolling:Thumbnail fit your large screen...You can use it with: ▶<a href="https://addons.mozilla.org/fr/firefox/addon/thumbnail-zoom-plus/"><b>Thumbnail Zoom Plus</b></a> ▶Flickr PM :<a href="http://forum.userstyles.org/discussion/30090/x#Item_1"><b>my TWEAK Script : Icons/new links for &quot;flickr PM&quot;</b></a>`
@version        20201024.15.55
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);

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

/* ==== Flickr WideScreen (Viewer) - FlickRiver v.9  - TEST view large
http://www.flickriver.com/photos/pryingopen/popular-interesting/
==== */
img.photo-protector {
    display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* (new8) TOP HEADER */
#logo {
    left: 64px;
    position: absolute;
    top: 20px;
}

#login-logout {
    font-size: 0.8em;
    padding-bottom: 2px;
    position: absolute;
    right: 10px;
    top: 25px;
}
#header {
    position: relative;
    height: 63px;
    padding-bottom: 0 !important;
    padding-left: 2px;
    padding-top: 0.5em;
    border: medium none;
    overflow: hidden;
    background: #0d0d0d !important;
}

/* (new8) */
body.river.viewlarge:not(.fitscreen) ,
body.river:not(.fitscreen) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: -16px !important;
}

#top-badge-menu {
    position: absolute;
    top: -3px;
    left: 28%;
}
.top-toolbar {
    display: inline-block !important;
    width: 1907px !important;
    height: 55px !important;
    margin-bottom: 14px !important;
    margin-top: -14px !important;
}
#tool-menu {
    float: right;
    font-size: 0.9em;
    margin-right: 6px;
    margin-top: -24px;
    padding-bottom: 2px;
    text-align: right;
}
/* LARGE */
body.river.viewlarge > center #tool-menu {
    float: right;
    font-size: 0.9em;
    margin-right: 6px;
    margin-top: -24px;
    padding-bottom: 2px;
    text-align: right;
}
.menu {
    margin-top: -20px !important;
    padding-top: 0;
}



/* (new8) PHOTO PAGE */


.river:not(.fitscreen):not(.viewlarge) #photos .photos-page {
float: left !important;
clear: none !important;
width: 48% !important;
height: 285px !important;
margin-left: 1em;
margin-bottom: 5px !important;
/* padding-right: 1em !important; */
overflow: hidden !important;
border: 1px solid #222 !important;
}

/* SHOTS IN DOUBLE NOT DISPLAYED */
.river:not(.fitscreen).river:not(.fitscreen):not(.viewlarge) #photos .photos-page .photo-panel {
/* display: inline-block !important; */
float: left !important;
clear: right !important;
width: 24% !important;
/* min-width: 475px !important; */
/* max-width: 500px !important; */
margin-right: -0.8em;
margin-left: 1em;
/* margin: auto !important; */
margin-bottom: -6em;
  margin-top: 0em;
/* padding-right: 1em !important; */
  padding: 2px 0 0;
/* text-align: center !important; */
transform: scale(0.4);
transform-origin: left top 0;

}
.river:not(.fitscreen):not(.viewlarge) .photo-panel .photo-img-container, 
.river:not(.fitscreen):not(.viewlarge) .photo-panel .photo-video-container {
    position: relative;
    width: 500px !important;
border: 2px solid #222 !important;
}


.river:not(.fitscreen):not(.viewlarge) #photos div.photos-page[id=""]:nth-child(2n):last-of-type, 
.river:not(.fitscreen):not(.viewlarge) .photos-page:last-of-type {
display: inline-block;
  float: left;
  height: 490px !important;
    margin-top: 0px !important;
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.7s ease 0s;
  min-width: 100% !important;
/* background: red !important; */
outline: 1px solid #222 !important;
}

/* (new9) BIG PROGRESS BAR */
#big-progress {
    display: inline-block !important;
float: left !important;
width: 100% !important;
    height: 20px !important;
    margin-bottom: 0px;
    top: 0px !important;
    padding-bottom: 0px !important;
text-align: center !important;
/* background: blue !important; */
}



/* (new9) FIRST LOAD */
.river>center {
    min-height: 984px !important;
}
/*.river:not(.fitscreen):not(.viewlarge) .tools-panel[style="display:none;"] + br + center .top-toolbar + #user-tags + #photos .photos-page:not([id=""]):not(:first-of-type) */

.river:not(.fitscreen):not(.viewlarge) .tools-panel[style="display:none;"] + br + center .top-toolbar + #user-tags + #photos .photos-page:not([id=""]):only-of-type  {
/* display: inline-block !important; */
    clear: none;
    float: left;
    height: auto !important;
    max-width: 1700px !important;
    margin-bottom: 5px;
    margin-left: 0em !important;
    overflow: hidden;
    opacity: 1 !important;
    transform: scale(0.9) !important;
/* border: 1px solid red !important; */
}

.river:not(.fitscreen):not(.viewlarge) .tools-panel[style="display:none;"] + br + center .top-toolbar + #user-tags + #photos .photos-page:not([id=""]):only-of-type  .photo-panel {
    clear: right;
    float: left;
    width: 24%;
    margin: 0 -0.8em -6em 1em;
    padding: 2px 0 0;
    transform: scale(0.7);
    transform-origin: left top 0;
}



/* IMAGE - for MEDIUM 640 */
.river:not(.fitscreen):not(.viewlarge)  #photos .photos-page  .photo-img-container > a >img[src$="_z.jpg"] {
max-width: 500px !important;
height: auto !important;
/* max-height: 400px !important; */
/* outline: 1px solid violet !important; */
}


/* METAS */
.river:not(.fitscreen):not(.viewlarge)  .photo-meta {
display: inline-block !important;
/* width: 226% !important; */
min-width: 503px !important;
max-width: 503px !important;
  margin-top: 0.4em;
  padding-bottom: 1px;
  transform: scale(1) !important;
font-size: 30px !important;
background: #333 !important;
}
.photo-title {
    display: inline-block;
    min-width: 100% !important;
}


.river:not(.fitscreen):not(.viewlarge) .photo-more-info-panel {
position: absolute !important;
/* display: inline-block !important; */
height: 155px !important;
  line-height: 1em;
width: 225% !important;
min-width: 225% !important;
max-width: 225% !important;
  padding: 0 5px 0 5px !important;
  margin-top: 0em !important;
top: 0em !important;
font-size: 37px !important;
  transform: scale(1) !important;
overflow: hidden !important;
/* overflow-y: auto !important; */
z-index: 5000000 !important;
  border: 1px dotted #4e4e4e;
/* background: green !important; */
}
.river:not(.fitscreen):not(.viewlarge) .photo-more-info-panel.docked {
position: absolute !important;
/* display: inline-block !important; */
height: 658px !important;
top: 0.2em !important;
padding: 5px !important;
/*   margin-top: -10em !important; */
/*   background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green) !important; */
/*     background-image: linear-gradient(to right, rgba(13, 13, 13, 0.93), rgba(48, 46, 45, 0.86), rgba(62, 62, 60, 0.8), rgba(70, 74, 70, 0.89)) !important; */
    background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(48, 46, 45, 1), rgba(50, 50, 48, 1), rgba(0, 0, 0, 1)) !important;
}

.photo-secondary-meta hr {
    background-color: tan !important;
    border: 0 none;
    color: #444;
    float: left;
    height: 1px;
    text-align: left;
    width: 100%;
    margin: 0  !important;
}
.river:not(.fitscreen):not(.viewlarge) .photo-meta-more > .photo-description.highlight-links ,
.river:not(.fitscreen):not(.viewlarge) .photo-description {
    color: #666;
    margin-top: -0.7em;
}

.river:not(.fitscreen):not(.viewlarge) .photo-more-info-panel.docked .photo-description span {
display: inline-block !important;
    max-width: 100% !important;
    color: red !important;
    margin-top: 1em;
}
.highlight-links a, 
.highlight-links 
a:visited, 
.highlight-links a:active, 
.highlight-links a:link {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    word-break: normal !important;
    color: peru !important;
}
a:visited {
    color: tomato !important;
}

/* (new8) MORE INFOS - NORMAL */
.river:not(.fitscreen):not(.viewlarge) .photo-more-info-panel.docked .photo-secondary-meta {
    height: 305px !important;
    width: 100% !important;
    margin-top: 0.5em !important;
    padding-right: 0 !important;
    margin-top: 0.5em !important;
border-top: 2px solid gold !important;
border-bottom: 2px solid gold !important;
overflow: hidden !important;
overflow-y: auto !important;
color: gold !important;
}

.river:not(.fitscreen):not(.viewlarge) .photo-stats.photo-secondary-meta-item>a ,
.river:not(.fitscreen):not(.viewlarge) .photo-secondary-meta-item {
color: gold !important;
    font-size: 0.9em;
}
.more-data-panel>nobr>a ,
.more-data-panel>a ,
.photo-context-sets.photo-secondary-meta-item>nobr>a{
color: peru !important;
}

.river:not(.fitscreen):not(.viewlarge) .photo-more-info-panel .close {
    position: absolute;
    cursor: pointer;
    display: block;
/*     height: 30px !important; */
/*     width: 30px !important; */
    right: 2px;
    top: 2px;
    overflow: hidden;
  transform: scale(3) !important;
z-index: 5000 !important;
}







/* (new8) VIEW LARGE */
.river.viewlarge:not(.fitscreen) .photos-page, 
.river.viewlarge:not(.fitscreen) .tools-panel[style="display:none;"] + br + center .top-toolbar + #user-tags + #photos .photos-page:only-of-type, 
.river.viewlarge:not(.fitscreen) .tools-panel[style="display:none;"] + br + center .top-toolbar + #user-tags + #photos .photos-page  {
    display: inline-block !important;
    height: 630px !important;
    width: 1870px !important;
    transform: scale(1) !important;
border: 1px solid #333 !important;
}
.river.viewlarge:not(.fitscreen) #photos .photos-page .photo-panel {
    display: inline-block;
    vertical-align: top !important;
    height: 580px !important;
    width: 380px !important;
    margin-right: 15px !important;
border: 1px solid #222 !important;
}
.river.viewlarge:not(.fitscreen) #photos .photos-page .photo-panel img.photo-panel-img {
    max-width: 380px;
    height: auto;
}
body.river.viewlarge:not(.fitscreen) #photos a.noborder:last-of-type::after {
    content: "●";
    position: absolute;
    display: inline-block;
    height: 10px;
    line-height: 10px;
    right: 15px !important;
    bottom: -25px !important;
    font-size: 20px;
    border: none;
    color: #222;
}
.photo-panel .photo-panel-img {
    border: none;
}
/*  (new8) MORE INFOS - LARGE - .river.viewlarge:not(.fitscreen) */
.river.viewlarge:not(.fitscreen) .photo-more-info-panel.docked {
    position: absolute !important;
  min-width: 19.7% !important;
  max-width: 19.7% !important;
    height: 567px;
    top: 1.2em;
    padding: 5px;
    background-image: linear-gradient(to top, rgb(0, 0, 0), rgb(48, 46, 45), rgb(50, 50, 48), rgb(0, 0, 0));
}

.river.viewlarge:not(.fitscreen) .photo-more-info-panel.docked .photo-secondary-meta {
    height: 305px !important;
    width: 100% !important;
    margin-top: 0.5em !important;
    padding-right: 0 !important;
    margin-top: 0.5em !important;
border-top: 2px solid gold !important;
border-bottom: 2px solid gold !important;
overflow: hidden !important;
overflow-y: auto !important;
color: gold !important;
}

.river.viewlarge:not(.fitscreen) .photo-stats.photo-secondary-meta-item>a ,
.river.viewlarge:not(.fitscreen) .photo-secondary-meta-item {
color: gold !important;
    font-size: 0.9em;
}
.more-data-panel>nobr>a ,
.more-data-panel>a ,
.photo-context-sets.photo-secondary-meta-item>nobr>a{
color: peru !important;
}

.river.viewlarge:not(.fitscreen) .photo-more-info-panel .close {
    position: absolute;
    cursor: pointer;
    display: block;
/*     height: 30px !important; */
/*     width: 30px !important; */
    right: 2px;
    top: 2px;
    overflow: hidden;
  transform: scale(3) !important;
z-index: 5000 !important;
}


/* OPTIONS */
.river:not(.fitscreen):not(.viewlarge) .photo-panel .photo-ops {
    position: absolute;
/* display: inline-block !important; */
    vertical-align: top !important;
    width: 166px;
    height: 22px;
    bottom: 10px;
    right: 0px;
    left: 0px !important;
    text-align: center !important;
    transform: scale(3) !important;
    transform-origin: center left !important;
}


/* VISITED */
body.river #photos a.noborder:last-of-type:after  , 
body.river.viewlarge.fitscreen #photos a.noborder:last-of-type:after  ,
body.river.viewlarge.fitscreen #photos a.noborder:last-of-type:after  {
    content: "●" !important;
    position: absolute !important;
    display: inline-block !important;
    height: 10px !important;
    line-height: 10px !important;
    bottom: -35px !important;
    right: -15px !important;
    font-size: 20px !important;
    color: #222 !important;
border: none !important;
}
body.river.viewlarge.fitscreen #photos a.noborder:last-of-type:after  ,
body.river.viewlarge:not(.fitscreen) #photos a.noborder:last-of-type:after  , 
body.river.viewlarge.fitscreen #photos a.noborder:last-of-type:after  {
    color: #222 !important;
border: none !important;
}
body.river #photos a.noborder:last-of-type:visited:after  , 
body.river.viewlarge:not(.fitscreen) #photos a.noborder:last-of-type:visited:after , 
body.river.viewlarge.fitscreen #photos a.noborder:last-of-type:visited:after {
    color: red !important;
border: none !important;
}

/* PHOTO ZOOM :not([style*="display: none;"]) */
.river #photo-zoomed-view-screen {
    position: absolute;
/*     display: inline-block !important; */
    height: 928px;
    width: 1908px;
    left: 0;
    top: 0;
    z-index: 1 !important;;
background: black !important;
}
.river #photo-zoomed-view-screen:after {
content: "x" ;
    position: absolute;
display: inline-block !important;
bottom: 0% !important;
right: 5px !important;
}
.river #photo-zoomed-view-screen:hover:after {
content: "click to close" ;
    position: absolute;
display: inline-block !important;
bottom: 0% !important;
right: 5px !important;

}
.river #photo-zoomed-view-screen #photo-zoomed-view  {
    position: absolute;
    width: 908px;
    height: 908px;
    left: 500px;
    top: 6.66667px;
    z-index: 2000000 !important;
}
.river.viewlarge.fitscreen .photo-panel.photo-panel.current-photo.hovering  .photo-op-zoom-out {
border: 1px solid red !important;
}
.river.viewlarge:not(.fitscreen ) .photo-op.photo-op-zoom-stretch[title="Zoom photo (large size not available)"] {
    display: none !important;
}
/* .river.viewlarge.fitscreen .photo-op.photo-op-zoom-out[title="Cancel fit screen mode"] ,  */
.river.viewlarge.fitscreen .photo-op.photo-op-zoom-stretch[title="Zoom photo (large size not available)"] {
    display: none !important;
}
/* ===== END  ==== */

}

Reviews

No reviews yet.