Flickr WideScreen (Viewer) - DACKR - v.7 by decembre

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

Flickr WideScreen (Viewer) - DACKR - v.7 screenshot
Install Get Stylus Write a review

Details

Authordecembre

LicenseNO-REDISTRIBUTION

Created atApril 09, 2021 21:43

Updated atAugust 25, 2021 23:00

Applies todarckr, widescreen, flickr

Statistics

Learn how we calculate statistics in the FAQ.

Total views128

Total installs8

Weekly installs0

Weekly updates0

Description

WIDE style For Dackr (It’s for a WIDESCREEN(1920x1080)!
Less Scrolling:
Thumbnail fit your large screen…

NEW : now WORK for FIREFOX and CHROME

To use with:
Thumbnail Zoom Plus
And Flickr PM :
my TWEAK Script : Icons/new links for “flickr PM”
Description of this useful Flickr Viewer :
Darckr, your Flickr Viewer and Tool
Screenshot from Brett stream:
Brett’s stream (via DarckR)

Notes

▶ WHAT IT do :
Thumbnail fit the screen (8x2 +4thumbs).

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

IMPORTANT : This style work for the “thumbnail” Dark’s setting (at the to of it’s page)

If you want be sure add this at the end of the address:

&colSmall=5&numSmall=25&sort=interestingness-desc&colSmall=4&numSmall=16

And click the “REMEMBER” button” to keep it all the time.
(These 2 buttons - thumbnail and remember - are styled in gold and bigger with my style.)

Change for V.7:
- Add :visited shots indicator (visited = green)
- Chrome compatibilitty
- ROW counter


Darckr’s Description :
Darckr, your Flickr Viewer and Tool
Darckr is a free tool for displaying and acting upon Flickr images. Darckr uses the flickr api to retrieve data and hence cannot let other people view unauthorized content. By default darckr displays photos at a size that cannot exceed “Small” (240 pixels). Unlike other viewers, Darckr uses “opt-in” to grant access to larger sizes. If you think this is not enough, or on the opposite wish to opt-out go to “http://darckr.com/optin” to set up your preferred visible size. In both cases, you will have to grant darckr access to your stream to authenticate, so that he knows who you are. Right after if you do not wish to take advantage of the stream management features of darckr you may revoke the permission from your accounts page.

Oh, and Darckr will automatically display your photos beautifully by adding drop shadows (and borders of course if you like).


You can open it , directly your Flickr Page, with my tweak of “FlickPM”:
Greasemonkey (FlickrPM)Tweak

▶ Read here :
my TWEAK Script : Icons/new links for “flickr PM”
► “Flickr PM” - my TWEAK : Icons/new links for “Flickr PM”:
Adds easily accessible icon links to a users FlickrPM popup mail (envelope icon), Profile (profile icon), Change relationship (RE), Flickr DNA (DN), Most Interesting Photos (IN), Flickr Scout (SC), Photo Archive (Coloured Grid), next to their user names in forums and photo comments. It also allows you to send a flickr mail to a user without actually leaving the page you are on.)
(Discuss)

FOR Dark Gray color, Test this Style :
Flickr WideScreen - DARK/Grey (Tweak Perso)

===============
It’s a part of my “Flickr WideScreen Collection”.

▶ Part 1:
Flickr Widescreen - ALLinONE (Part 1)
AND…
▶ Part 2:
Flickr Widescreen - ALLinONE (Part 2)

You Want a Dark/Grey Style?:
Flickr WideScreen - Dark & Grey

NEW (2020.04):
To install all parts of “Flickr Widescreen - ALLinONE” at once,
you can use my userscript [Greasyfork]:
Flickr WideScreen - BigONE v.151

Other Userstyles in my “Flickr WideScreen Collection” :
► [NEW] For Favorites pages ( v.1 02.06.2020):
Flickr WideScreen - ALLinONE - Favorites Small

- For Flickr Viewers :
Flickr WideScreen (Viewers) - FlickrHiveMind
Flickr WideScreen (Viewers) - DACKR Viewer
Flickr WideScreen (Viewer) - FFFLCKR (fffflckr)

- For Flickr Userscripts (GM: cf greasemonkey):
Flickr WideScreen - SCRIPT - Commented ON-FLUID
Flickr WideScreen - Script (GM) - Flickr Functional Suite(Update 2014)

These Styles are better with this Useful Addon to preview thumbnail on hover (or a similar Addon):
Thumbnail Zoom Plus


For More information on Scripts and Addons that i use a lot with FLICKR:
My BIG LIST - may 2012.
(in Flickr Hacks discuss)
Userscripts Group : “Flickr ★ Surf” (USO :8080)

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.0017.0033.0049.0065.0082.0098.00114.00130.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           Flickr WideScreen (Viewer) - DACKR - v.7
@namespace      USO Archive
@author         decembre
@description    `WIDE style For Dackr (It's for a WIDESCREEN(1920x1080)!Less Scrolling:Thumbnail fit your large screen...<b>NEW : now WORK for FIREFOX and CHROME</b>To use with:<a href="https://addons.mozilla.org/fr/firefox/addon/thumbnail-zoom-plus/"><b>Thumbnail Zoom Plus</b></a>And 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>Description of this useful Flickr Viewer :"<a href="http://darckr.com/"><b>Darckr, your Flickr Viewer and Tool</b></a>Screenshot from Brett stream:<a href="http://darckr.com/username?sort=interestingness-desc&amp;format=Small&amp;username=21172551@N00">Brett's stream (via DarckR)</a>`
@version        20200911.16.41
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);

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

/* ==== (new2) FLICKR - DACKR Viewer - WideScreen - V.7 (new7) - CHROME/FIREFOX - COUNTER ROW - (THUMBNAIL ZOOM PLUS COMPATIBILITY) ==== */

/* IMPORTANT : for a working settings with this Style  (THUMBNAIL), add this at the end of the adress:

&colSmall=5&numSmall=25&sort=interestingness-desc&colSmall=4&numSmall=16 

And click the "REMEMBER " button" to keep it all the time.
these 2 buttons are styled in gold and bigger with my style.
=== */

/* NOTE - EASY To USE with : GREASEMONKEY Script : "FLICKR PM" 
READ : how to tweak it to add a DARKR Button ? :
http://forum.userstyles.org/discussion/30090/my-tweak-script-iconsnew-links-for-flickr-pm#Item_2
=== */


/* (new7) - WELCOME - LINKS more visible - === */
#welcome>p>a {
    color: white!important;
    font-style: italic;
    text-decoration: none;
}
#welcome>p>a:hover {
    color: peru !important;
    font-style: italic;
    text-decoration: none;
}
/* (new2) CHROME TEST */

/* (new2) THUMBNAIL ROWS - ALL - === */
#images div>table>tbody>tr  {
	position: relative !important;
	display: inline-block !important;
	width: 950px !important;
	left: -10px !important;
/*	outline: 1px solid red !important;*/
}

/* (new2) THUMBNAIL  ROWS - === */
#images div>table>tbody tr:nth-child(even):not(:last-child) {
	position: relative !important;
	display: inline-block !important;
	float: right !important;
	clear: both!important;
/*	width: 950px !important;*/
	margin-right: -10px !important;
	margin-top: -248px !important;
outline: 1px solid #222 !important;
}
#images div table tbody tr:nth-child(odd):not(:last-child) {
	position: relative !important;
	display: inline-block !important;
	float: left !important;
/*	clear: both!important;*/
	width: 950px !important;
outline: 1px solid #222 !important;
}

/* (new7) THUMBS - === */
#images div table tbody tr td {
	position: relative !important;
	display: inline-block !important;
	max-width: 210px !important;
	margin-right: 2% !important;
/*	right: 3% !important;*/
	padding: 0px !important;
	-moz-transform: scale(0.9) !important;
	-webkit-transform: scale(0.9) !important;
}

#images>div>div>table>tbody>tr>td>a>div>img {
	position: relative !important;
	display: inline-block !important;
	border: 1px solid #222222 !important;
/* border: 1px solid green !important; */
}
#images>div>div>table>tbody>tr>td>a>div:after {
content: "●" ;
	position: relative !important;
	display: inline-block !important;
/* 	border: 1px solid #222222 !important; */
/* transform: scale(0.5) ; */
color: #222 !important;
}
#images>div>div>table>tbody>tr>td>a:visited>div:after {
content: "●" ;
	position: relative !important;
	display: inline-block !important;
/* 	border: 1px solid red !important; */
/* transform: scale(0.5) ; */
color: green !important;
}
/* THUMBNAIL - === */
#collapsiblemenu #options >a:nth-child(9){
	border: 1px solid gold !important;
	border-radius: 5px !important;
	color: gold !important;
	font-size: 20px !important;
	padding: 0 10px !important;
}

/* THUMBNAIL ZOOM PLUS COMPATIBILITY - === */
#images>div>table>tbody>tr>td>a>div>img ,
#images>div>div>table>tbody>tr>td>a>div>img {
	background-image: none !important;
	display: block;
	margin-bottom: -248px;
	pointer-events: none !important;
	position: relative;
	top: -248px;
}
/* REMEMBER - === */
#collapsiblemenu div[name="menu"] >a:nth-child(18){
	border: 1px solid gold !important;
	border-radius: 5px !important;
	color: gold !important;
	font-size: 20px !important;
	padding: 0 10px !important;
}



/* (new2) COUNTER - 
#images>div>div:empty

=== */
#images {
	counter-reset: my !important;
}
#images>div>div {
	counter-increment: my !important;
} 
#images>div>div:not(:last-child):before {
	position: relative !important;
	display: inline-block !important;
	min-width: 30px !important;
	padding: 2px !important;
	margin-left: -12px !important;
/*	top: 5px !important;*/
	content: "" counter(my) "" !important;
        color: red !important;
	background: rgba(62, 59, 59, 0.6) !important;
	border-radius: 10px 10px 10px 10px !important;
	box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset !important;
	font-size: 10px !important;
	text-align: center !important;
	z-index: 500 !important;
} 
#images>div>div:first-of-type:before {
	position: absolute !important;
	display: inline-block !important;
	top: 202px !important;
/*        color: violet !important;*/
/*	background: yellow !important;*/
} 

/* (new3)TEST GROUPS - 
=== */
#images div div[id*="@N"]:nth-child(odd) {
    text-align: left !important;
    width: 48% !important;
    margin-left: -50% !important;
    background: #222222 !important;
}
#images div div[id*="@N"]:nth-child(odd) strong {
    display: inline-block !important;
    min-width: 623px !important;
}

#images div div[id*="@N"]:nth-child(even) {
    position: relative !important;
    display: inline-block !important;
    text-align: left !important;
    width: 49% !important;
/*height: 15px !important;
    line-height: 15px !important;*/
    margin-left: 48% !important;
    top: -14px !important;
    background: black !important;
}
#images div div[id*="@N"]:nth-child(even) strong {
    display: inline-block !important;
    min-width: 623px !important;
}


#images {
	counter-reset: image !important;
}

#images div div[id*="@N"]:before {
	content: "▶ " counter(image) ": " !important;
	counter-increment: image !important;
        color: red !important;
}
/*#images div div[id*="@N"]:before {
content: "X" !important;
color: red !important;
}*/

#images div div[id*="@N"] strong + a {
    position: relative !important;
    display: inline-block !important;
    float: right !important;
/*min-width: 20px !important;
max-width: 20px !important;*/
    font-size: 0 !important;
}
#images div div[id*="@N"] strong + a:after {
    font-size: 12px !important;
/*min-width: 20px !important;*/
    content: "X" !important;
}

#images div div[id*="@N"]:hover{
color: gold!important;
background: green !important;
}
#images div div[id*="@N"] a:hover{
color: gold!important;
background: black !important;
padding: 1px 2px !important;
border-radius: 5px !important;
border: 1px solid yellow !important;
}
#images div div[id*="@N"] strong + a:hover:after {
color: red !important;
}
#images div div[id*="@N"] strong  a:visited {
color: red !important;
}
/* ===== END ===== */

}

Reviews

No reviews yet.