info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-30 03:30:34 +02:00
Code Issues Releases Wiki Activity

renamed graphics-element dir

Browse Source
This commit is contained in:
Pomax
2020-11-06 11:32:44 -08:00
parent 3288732350
commit 77284e1051
34 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
docs/js/graphics-element/graphics-element.css Normal file
View File

@@ -0,0 +1,89 @@
/*
Let's look at how we can give the <graphics-element> a decent look,
but also how we can make sure that the <fallback> content only shows
when the <graphics-element> isn't actually defined, because scripts
are disabled (or blocked!).
*/
graphics-element {
display: inline-block;
border: 1px solid grey;
}
/*
We can use the :defined pseudo-class to check whether a particular
element is considered a "real" element (either by being a built-in
standard HTML element, or a registered custom element) or whether it's
just "a tag name that isn't tied to anything".
If JS is disabled, as well as when the JS for registering our custom
element is still loading, our <graphics-element> will just be "a word"
and so we want to make sure to not show any content, except for the
<fallback-image>, if there is one.
So, first off: hide everything!
*/
graphics-element:not(:defined) > * {
display: none;
}
/*
And then we declare a more specific rule that does NOT hide the
<fallback-image> element and its content.
*/
graphics-element:not(:defined) fallback-image {
display: block;
text-align: center;
padding: 0.5em;
margin: auto;
}
/*
Normally, images are inline elements, but in our case we want it to be
treated as a full block, so that the caption text shows up underneath
it, rather than next to it:
*/
graphics-element:not(:defined) fallback-image > .view-source {
display: block;
position: relative;
top: -0.6em;
margin-bottom: -0.2em;
font-size: 60%;
color: #00000030;
}
graphics-element:not(:defined) fallback-image > label {
display: block;
font-style: italic;
font-size: 0.9em;
text-align: right;
}
graphics-element:not(:defined) fallback-image > img {
display: block;
border: 1px solid lightgrey;
}
/*
Then, we say what should happen once our <graphics-element> element
is considered a proper, registered HTML tag:
*/
graphics-element:defined {
display: inline-block;
padding: 0.5em;
justify-self: center;
font-size: revert;
text-align: revert;
}
/*
And of course, once that's the case we actually want to make sure that
the <fallback-image> does NOT show anymore!
*/
graphics-element:defined fallback-image.loaded {
display: none;
}