▶ WIDE style For:
FlickRiver (a good Flickr viewer)
▶ It's for a WIDESCREEN(1920x1080)!Less Scrolling:Thumbnail fit your large screen...
Flickr WideScreen (Viewer) - FlickRiver v.15 by decembre
Imported and mirrored from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/126659.user.css
Details
Authordecembre
Licenseunlicense
Categoryflickriver, widescreen, flickr
Created
Updated
Size20 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
For FlickRiver (a Flickr viewer) and a Large Screen...
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......
You can use it with an addon to preview shots on hover:
- Imagus
- Thumbnail Zoom Plus
Add compatibility with these type of addon (now you can preview the thumb on hover) :
(Shows full image when you hover over a thumbnail.)
▶ Change in v.15:
- Center Images verticaly
- Description
- Corrections for Sets pages
- 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)
Note: - You can install too "View on Flickriver" Greasemonkey script:
"adds Flickriver links to various Flickr photo pages - user photos, favorites, pools etc, allowing to quickly open the corresponding Flickriver view" - It is useful too when you want use:
Flickr Functional Suite - NEW 2014 is a new working version
It's a part of my "Flickr WideScreen Collection".
▶ My "Flickr WideScreen" 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
► 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 Userstyle, a new alternative:
Flickr WideScreen - BigONE [userstyles.world - USw]
or
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:
- For Firefox Quantum / Chrome (with Stylus):
Overlay Scrollbars - easy customizable - For Waterfox "Classic" 56:
My Firefox - Slim Dark Scrollbar
► You can test too my other Userstyles (Many are better for a Wide Screen (1920x1080)!):
Flickr WideScreen - 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 (Created in 2015) - Updated in 2022.
I have Updated all links from userscripts.org (defunct) ,
to point now to userscripts-mirror.org (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 (Viewer) - FlickRiver v.15
@namespace USO Archive
@author decembre
@description ▶ WIDE style For Flickriver (a Flickr viewer): https://www.flickriver.com/ ▶ It's for a WIDESCREEN(1920x1080)! Less Scrolling: Thumbnail fit your large screen...
@version 20220325.00.25
@license NONE
@preprocessor uso
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("flickriver.com") {
/* ==== Flickr WideScreen (Viewer) - FlickRiver v.15.1 ==== */
/* 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:not(.set) {
/* 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;
}
/* (new15) */
.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;
height: 634px !important;
/* border: 2px solid #222 !important; */
/* border: 2px solid aqua !important; */
}
/* (new10) A VOIR for SET */
/* .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;
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; */
}
/* (new10) FIRST LOAD + SETS*/
.river>center {
display: inline-block !important;
min-height: 100vh !important;
}
.river>center > #photos {
display: inline-block !important;
height: 100% !important;
min-height: 100vh !important;
min-height: 100vh !important;
/* background: green !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 {
/* position:fixed !important; */
/* position: relative !important; */
/* display: inline-block !important; */
clear: none;
float: left !important;
height: auto !important;
width: 100% !important;
min-width: 99.9% !important;
max-width: 99.9% !important;
top: 0px !important;
margin-top: 0px !important;
margin-left: 0px !important;
/* margin-bottom: 5px; */
/* margin-left: 0em !important; */
overflow: hidden;
opacity: 1 !important;
/* transform: scale(0.9) !important; */
/* background: aqua !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:not(.set) {
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;
}
/* (new10) SETS */
.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.set {
/* display: inline-block !important; */
clear: right;
float: left !important;
width: 26.3% !important;
height: 260px !important;
line-height: 260px !important;
margin: 5px -150px -35px 20px !important;
padding: 2px 0 0;
border-radius: 5px 5px 0 0 !important;
transform: scale(0.7);
transform-origin: left top 0;
background: black !important;
border: 1px solid red !important;
}
.river:not(.fitscreen):not(.viewlarge) .photo-panel.set .photo-meta {
max-width: 502px !important;
min-width: 502px !important;
left: -1px !important;
bottom: -53px !important;
border-radius: 0 0 5px 5px !important;
background: #333 !important;
border: 1px solid red !important;
}
.photo-panel.set img {
display: inline-block !important;
height: 240px !important;
border: 1px solid #777;
border-radius: 7px;
padding: 6px;
}
/* (new15) 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; */
height: 634px !important;
object-fit: contain !important;
border: none !important;
/* outline: 1px solid violet !important; */
}
/* (new13) METAS */
.river:not(.fitscreen):not(.viewlarge) .photo-meta {
position: absolute !important;
display: inline-block !important;
height: 50px !important;
line-height: 50px !important;
min-width: 503px !important;
max-width: 503px !important;
margin-top: 0.4em;
bottom: -60px !important;
left: 0 !important;
padding-bottom: 1px;
transform: scale(1) !important;
transform-origin: top center;
/* translate: */
font-size: 30px !important;
overflow: hidden !important;
z-index: 5000 !important;
background: #333 !important;
}
.river:not(.fitscreen):not(.viewlarge) .photo-meta:hover {
position: absolute !important;
display: inline-block !important;
/* height: 50px !important; */
height: auto !important;
min-height: 50px !important;
line-height: 40px !important;
/* width: 226% !important; */
min-width: 503px !important;
max-width: 503px !important;
margin-top: 0.4em;
bottom: -60px !important;
left: 0 !important;
padding-bottom: 5px;
padding-top: 20px !important;
transform: scale(1) !important;
transform-origin: top center;
font-size: 30px !important;
overflow: hidden !important;
z-index: 5000 !important;
color: gold !important;
background: #333 !important;
}
.photo-title {
display: inline-block;
min-width: 90% !important;
padding-right: 5px !important;
padding-left: 5px !important;
}
.river:not(.fitscreen):not(.viewlarge) .photo-meta .photo-owner {
display: inline-block;
min-width: 90%;
padding: 5px !important;
}
.river:not(.fitscreen):not(.viewlarge) .photo-meta:hover .photo-title a {
border-bottom: none ;
text-decoration: none !important;
color: gold !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: lin...