[ni_cc]

2nd Update

Hey so here are some more tweaks improving the box shadow effect & borders, adding a border radius for rounded edges, and setting seperate variables depending on whether its for images or notes/links with or without images, along with changes to the width variables as those doesn't conform to what they're supposed to, and not sure they allow showing full width of the screen due to it, as in Thunderbird it maxes at about 1700px if set to max setting whether intended to be 1200 or 1900px. See screenshot

So regardless of which version of the code you want to use from the previous update, replace & add the corresponding snippets below, comprising the whole first main section, (following the content rule, ending with border-color) and the whole width section further down. Technically the 10th width variable is the same as the 9th in Thunderbird at least, both maxing at 1700, so ymmv depending on platform & display size used, but because its shown as a content rule, can't use percentage values for width, so exact sizes have to remain a mystery.

Main code snippet to replace

 
padding: 1pt 2pt;
bottom: 3px; 
left: 3px; 
z-index: 1;
display: block; 
position:fixed;
max-width: 97%; 
width:auto; 
white-space: pre-wrap; 
word-wrap: break-word; 
font: normal normal 0/1.1em segoe ui;   
font-size: initial;
text-align: left;
color: #000; 
    text-shadow: -1px -1px 1px rgba(255,255,255,.4), 1px 1px 1px rgba(100,100,100,.5);
    box-shadow: 3px 2px 1px rgba(0,0,0,.3), -1px -1px 1px rgba(0,0,0,.15),
                1px 1px 1px rgba(0,0,0,.2), -3px -2px 1px rgba(0,0,0,.15);
border: 1px solid; 
border-color: rgba(255,255,255,.5) 
rgba(170,170,170,.75) rgba(160,160,160,.75) rgba(255,255,255,.6);
    border-radius: 1px  }

[img]:hover:after {
    border-radius: 10px !important;
    box-shadow: 4px 3px 1px rgba(0,0,0,.4), -1px -1px 1px rgba(0,0,0,.2),
                1px 1px 1px rgba(0,0,0,.2), -3px -2px 1px rgba(0,0,0,.15) !important;                
bottom: 6px !important; 
left: 6px; !important }

Width variables to replace

.width1:hover:after { width: 125px !important  } 
.width2:hover:after { width: 250px !important  } 
.width3:hover:after { width: 375px !important  } 
.width4:hover:after { width: 500px !important  } 
.width5:hover:after { width: 625px !important } 
.width6:hover:after { width: 750px !important } 
.width7:hover:after { width: 875px !important } 
.width8:hover:after { width: 1000px !important } 
.width9:hover:after { width: 1125px !important }
.width10:hover:after{ width: 1250px !important }