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

/* ==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.13.41
@license      NONE
@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 ===== */

}