FlickR BigONE - MY (YOUR) Comments (3 dots + numbers).css

@-moz-document url-prefix("https://www.flickr.com/photos/"), url-prefix("https://www.flickr.com/help/forum/") {
/* @-moz-document domain("flickr.com") */

/* ==== FLICKR - 03persoB - OK - v.295 - MY COMMENTS  (3 dots + numbers) + REPLY TO ME (3 DOTS) - DEV TEST Quantum ==== */

/* =========================================================
TO USE IT FOR YOUR OWN USAGE:
EDIT THIS CODE and RELACE in it ALL "bruno-decembre" by your user name
============================================================ */

/* (new294) - COUNT MY COMMENTS - cf counter-reset: myCOM !important;*/
.view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view.comment-list-view ol.comment-list {
/*     content: counter(myCOM) ;
    counter-increment: myCOM !important; */
    content: counter(myCOM, decimal);
    counter-increment: myCOM  0 !important;
	pointer-events: auto !important;
    list-style-type: none !important;
    counter-reset: myCOM !important;
}


.view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/bruno-decembre/"]:hover:after ,

.view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/bruno-decembre/"]:visited:after ,

.view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/bruno-decembre/"]:after {
/*     counter-increment: myCOM ; */
/*     counter-increment: myCOM  00 !important; */
/* content: counter(myCOM) ; */
    counter-increment: myCOM ! important;
    content: counter(myCOM, decimal);
    position: fixed !important;
    right: 560px !important;
    top: 22.3vh !important;
    min-width: 13px ;
    max-width: 13px ;
    margin: 0px 0 0 0px !important;
    border-radius: 10px ;
    font-size: 8px ;
    text-align: center ;
    visibility: visible !important;
	 pointer-events: auto !important;
z-index:  5000000000 !important;
/*    color: peru ;*/
/*background: rgba(62, 59, 59, 0.6) ;*/
/*box-shadow: none !important;*/
list-style-type: none !important;
color: white ! important;
box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset !important;
background: red !important;
}

/* (new242) PERSO - ADD INDICATOR - YES, I HAVE COMMENTED + DATE :not(:hover) -.fluid.html-photo-page-scrappy-view === */
/* .view.photo-comments-view .photo-comments.with-emoji-picker:not(:hover) .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item:only-of-type .author-info a.author-name[href="/photos/bruno-decembre/"] + .comment-date , */
.view.photo-comments-view .photo-comments.with-emoji-picker:not(:hover) .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/bruno-decembre/"] + .comment-date  {
    top: 21.5vh !important;
    opacity: 1 !important;
    z-index: 50000000 !important;
	pointer-events: auto !important;
    list-style-type: none !important;
border: 1px solid red !important;
background: green !important;
}
/* ONLY-OF-TYPE */
.view.photo-comments-view .photo-comments.with-emoji-picker:not(:hover) .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item:only-of-type .author-info a.author-name[href="/photos/bruno-decembre/"] + .comment-date  {
    top: 214px !important;
    opacity: 1 !important;
    z-index: 50000000 !important;
	pointer-events: auto !important;
    list-style-type: none !important;
border: 1px solid red !important;
background: brown !important;
}

/* (new242) PHOTO - COMMENTS ACTIONS in PANEL RIGHT - HOVER - PB EDIT DONE Button */
.view.photo-comments-view .photo-comments.with-emoji-picker:hover .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/bruno-decembre/"] + .comment-date:before {
    content: "<" !important;
    position: fixed !important;
    display: inline-block !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 13px !important;
    line-height: 13px !important;
    left: 1362px !important;
    top: 23vh !important;
    padding: 0 0 0 5px !important;
    border-radius: 5px !important;
    font-size: 10px !important;
    text-align: left !important;
    opacity: 1 !important;
	pointer-events: auto !important;
    visibility: visible !important;
    z-index: 500000 !important;
color: red !important;
border: 1px solid red !important;
background: gold !important;
}
.sub-photo-comments-view .comments .comment p.comment-author .comment-actions {
    display: inline-block !important;
}
/* (new292) */
.view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view .comment-list-container  ol.comment-list li.comment-list-item .view.comment-item-view .comment-item .avatar.person.tiny[href="/photos/bruno-decembre/"] + .content-container header .comment-actions a:before {
    content: "⦁⦁⦁" !important;
    position: fixed !important;
    display: inline-block !important;
    width: 100% !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 20px !important;
    left: 1393px !important;
    top: 22.3vh !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    text-align: center !important;
    visibility: visible !important;
    transform: scale(0.6) !important;
    transition: none !important;
	pointer-events: auto !important;
    z-index: 505000 !important;
    opacity: 1 !important;
color: peru !important;
background: #111 !important;
/* background: url(https://combo.staticflickr.com/ap/build/images/sprites/scrappy-38d5d4a7.png) -160px -84px no-repeat !important; */
border: 3px solid red !important;
} 




.view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view .comment-list-container  ol.comment-list li.comment-list-item .view.comment-item-view .comment-item .avatar.person.tiny[href="/photos/bruno-decembre/"] + .content-container header .comment-actions .comment-action svg {
    display: inline-block !important;
    height: 20px;
    width: 20px;
    transform: scale(2) !important;
}


/* (new295) PHOTO PAGE - REPLY TO ME - TREE DOTS- === */

/* (new295) PHOTO PAGE - REPLY TO ME INDICATOR - === */
.html-photo-page-scrappy-view .comment-content a[href="/photos/32838543@N00/"]:after ,
.html-photo-page-scrappy-view .comment-content a[href="/photos/bruno-decembre/"]:after {
    position: fixed  !important;
    display: inline-block !important;
    width: 15px !important;
    height:15px !important;
    line-height:15px !important;
    top: 151px  !important;
    right: 499px !important;
    border-radius: 50% !important;
    text-align: center !important;
    content: "💬 " ;
    font-size: 8px !important;
    z-index: 5000000 !important;
    opacity: 0.8 !important;
    visibility: visible !important;
background: gold ;
}
.html-photo-page-scrappy-view  .comment-content a[href="/photos/32838543@N00/"]:hover:after ,
.html-photo-page-scrappy-view  .comment-content a[href="/photos/bruno-decembre/"]:hover:after {
    background: green ;
}
/*.html-photo-page-scrappy-view li.comment-list-item:has(a[href="/photos/bruno-decembre/"]) .comment-actions.comment-action.comment-action-menu-button:hover:before ,*/
.html-photo-page-scrappy-view li.comment-list-item:has(a[href="/photos/bruno-decembre/"]):hover .comment-actions .comment-action.comment-action-menu-button:before {
    content: "⦁⦁⦁" !important;
    position: fixed !important;
    display: inline-block !important;
    width: 100% !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 20px !important;
    right: 505px !important;
    top: 15.4vh !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    text-align: center !important;
    visibility: visible !important;
    transform: scale(0.6) !important;
    transition: none !important;
	pointer-events: auto !important;
    z-index: 505000 !important;
    opacity: 1 !important;
color: peru !important;
background: #111 !important;
/* background: url(https://combo.staticflickr.com/ap/build/images/sprites/scrappy-38d5d4a7.png) -160px -84px no-repeat !important; */
border: 3px solid red !important;
} 

.html-photo-page-scrappy-view li.comment-list-item:has(a[href="/photos/bruno-decembre/"]) .comment-actions .comment-action.comment-action-menu-button svg {
	display: inline-block !important;
	height: 10px !important;
	width: 10px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 20px !important;
    fill: white !important;
}

/* (new243) FORUM - HELP - MY COMMENTS 
.Said h4 a.author[userphoto="decembre"]
==== */
/* .view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view.comment-list-view ol.comment-list */ 

#Hint + #GoodStuff h2 + #DiscussTopic table + table.TopicReply{
    content: counter(myReply, decimal);
    counter-increment: myReply  0 !important;
}

#Hint + #GoodStuff h2 + #DiscussTopic table + table.TopicReply tbody{
/*     content: counter(myCOM) ; */
/*     counter-increment: myCOM !important; */
/*     counter-increment: myCOM  01 !important; */
    content: counter(myIndex, decimal);
    counter-increment: myIndex  0 !important;
    list-style-type: none !important;
}


/* .view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/bruno-decembre/"]:hover:after ,

.view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/bruno-decembre/"]:visited:after ,

.view.photo-comments-view .photo-comments.with-emoji-picker .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/bruno-decembre/"]:after , */

#Hint + #GoodStuff h2 + #DiscussTopic table + table.TopicReply tbody .Said h4 a.author[userphoto="decembre"]:hover:after ,
#Hint + #GoodStuff h2 + #DiscussTopic table + table.TopicReply tbody .Said h4 a.author[userphoto="decembre"]:visited:after ,
#Hint + #GoodStuff h2 + #DiscussTopic table + table.TopicReply tbody .Said h4 a.author[userphoto="decembre"]:after {
/* counter-increment: myCOM ; */
/*     counter-increment: myCOM  1 !important; */
/*     content: counter(myCOM) ; */
    counter-increment: myIndex ! important;
    content: counter(myIndex, decimal) !important;
position: fixed !important;
    right: 670px !important;
    top:5.3vh !important;
    height: 15px  !important;
    line-height: 15px  !important;
    min-width: 15px ;
    max-width: 15px ;
    margin: 0px 0 0 0px !important;
    padding: 0 !important;
    border-radius: 10px ;
    font-size: 8px  !important;
    text-align: center !important;
    z-index: 10 ;
    visibility: visible !important;
	pointer-events: auto !important;
    list-style-type: none !important;
color: peru  !important;
color: white ! important;
box-shadow: none !important;
box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset !important;
background: rgba(62, 59, 59, 0.6) ;
background: red !important;
}

/* REPLY TO ME */
.Said h4 + p  a[href="/photos/bruno-decembre/"]:before {
    counter-increment: myReply ! important;
    content: "Reply to ME: " counter(myReply, decimal) !important;
position: fixed !important;
    right: 600px !important;
    top:5.3vh !important;
    height: 15px  !important;
    line-height: 15px  !important;
    min-width: 15px ;
/*     max-width: 15px ; */
    margin: 0px 0 0 0px !important;
    padding: 0 3px !important;
    border-radius: 10px ;
    font-size: 8px  !important;
    text-align: center !important;
    z-index: 10 ;
    visibility: visible !important;
	pointer-events: auto !important;
color: peru  !important;
color: white ! important;
box-shadow: none !important;
box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset !important;
background: rgba(62, 59, 59, 0.6) ;
background: blue!important;
}


/* ==== END  ==== */
}

FlickR BigONE - MY (YOUR) Comments (3 dots + numbers).md

FlickR BigONE - Custom - MY (YOUR) Comments (3 dots Menu + numbers of comments) It is ONLY for my userstyle:

Flickr WideScreen - BigONE v.294 (USw)

This tweak show the 3 dots menu of your comment in the Pho page in the right panel (at left of the comment box).

NEW (v.295) ADD 3dots Menu for The "User Reply to me".

Additionaly it give 2 other info:

• The date of your last your's comment and last comment of the users.

• the number of comment you have done on this shot.

To use it for your own usage: Edit this code and replace in it all "bruno-decembre" by your user name.

See screnshot:

BIGONE - TWEAK PERSO for the 3 Dots Menu of My comment And how to use it for your own usage

<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>