diff --git a/docs/style.css b/docs/style.css index 06fa519..27c70ee 100755 --- a/docs/style.css +++ b/docs/style.css @@ -6,29 +6,56 @@ html { margin-top: 1rem; } -#installation { +.version-select { overflow: hidden; } -#installation header > h3 { + +.version-select__snippet h3 { margin: 1rem 2.5rem 1rem 0; } /* Make the ✔ / ❌ Emoji appear next to the button */ -#installation header button { +.version-select__snippet__btn { position: relative; - margin-left: auto; + margin: 0 2px 0 auto; overflow: visible; } -#installation header button span { +.version-select__snippet__btn span { position: absolute; left: -2rem; display: inline-block; transform: scale(1.3); } + +.version-select__options { + margin-right: 1rem; +} +.version-select__options > label { + white-space: pre; +} +.version-select__options__additional > * { + margin-top: 1rem; + display: inline-block; +} +.version-select__options__additional summary { + display: block; + cursor: pointer; + font-weight: 600; +} +.version-select__options__additional summary:focus { + outline: none; +} +.version-select__options__additional summary:focus span { + text-decoration: underline; +} + /* Fixed layout so columns don't jump when content changes */ -#installation table { +.version-select__info { table-layout: fixed; } -#installation table th { +.version-select__info caption { + text-align: left; +} +.version-select__info th { border: none; vertical-align: top; width: 35%; @@ -58,6 +85,19 @@ body > footer { .translucent { opacity: 0.4; } +.tooltip { + position: relative; + cursor: help; +} +.tooltip::after { + content: ''; + position: absolute; + left: 0; + bottom: -4px; + width: 100%; + border-width: 0 0 1.5px; + border-style: dotted; +} /* For the bounce transitions of code snippet and copy success Emoji */ .v-enter, diff --git a/docs/versionpicker.html b/docs/versionpicker.html index adbd6ef..597a4e1 100755 --- a/docs/versionpicker.html +++ b/docs/versionpicker.html @@ -1,8 +1,8 @@ -
<head>
of your HTML: