-
-
Save pjaspers/accff59f5cd5a8f8023e to your computer and use it in GitHub Desktop.
| <div id="sha-stamp" class="sha-stamp"> | |
| <span class="sha-stamp__what-do-I-call-this?"> | |
| <small class="sha-stamp__content">#{content}</small> | |
| </span> | |
| </div> |
<style>
#sha-stamp {
position: fixed; bottom: 0; right: 0;
height: 16px;
background: rgb(0, 0, 0) transparent; background-color: rgba(0, 0, 0, 0.2);
padding: 0 5px;
border-top-left-radius: 5px;
z-index: 2147483647; font-size: 12px;
}
#sha-stamp span {
text-align: center;
}
#sha-stamp span small {
color: white;
font-weight: normal;font-size: 12px;
}
</style>
Why the span and the div? :)
<small id="sha-stamp" class="sha-stamp">#{content}</small>.sha-stamp {
z-index: 2147483647;
position: fixed;
bottom: 0;
right: 0;
display: block;
height: 16px;
padding: 0 5px;
background-color: rgba(0, 0, 0, .2);
border-top-left-radius: 5px;
font-size: 12px;
font-weight: normal;
text-align: center;
color: white;
}
.sha-stamp
.sha-stamp__contentwrapper
.sha-stamp__content
AND WHAT ABOUT THAT Z-INDEX BRO? :)
IT'S THE HIGHEST Z INDEX YOU CAN GET!
@IbeVanmeenen the div because that feels less hacky, you might be right about the span being superfluos. Thanks
@bramus that actually makes sense. Thanks
@pjaspers About that ID, just include the user CSS after yours, it'll still overwrite without requiring the ID?
@chrisrowe yes, but that will be hard to do, I'm "injecting" this html into a running app. So basically replacing </ body> with a <style> block and the html on each request.
I want whoever is running the app (and is using my little tool) to add snippets to her css (which is probably defined in <head>) that can override my style block which is defined at the end of the file.
Figured there would be an odd use case
@IbeVanmeenen more on the ridiculous high z number: pjaspers/shack@4a87296
@pjaspers awesome :).
Also: "the div because that feels less hacky". Don't really get that :)
I meant, since I'm injecting my html into a running app, it feels less wrong to inject a div. That way I'm always sure I'm containing my hackery into a single div. Probably just semantic nitpicking.
What's that you say? "But Piet, if you're so semantically inclined, what's up with the <small>, isn't that conflicting style and markup?"
Well, you've got me there.
You sir, are a gentleman and a scholar.
Can you add the css file so we can see what each class does?