diff --git a/www/sheet.xsl b/www/sheet.xsl index b85a0e6..1bc8787 100644 --- a/www/sheet.xsl +++ b/www/sheet.xsl @@ -24,13 +24,87 @@ font-family: sans; } - #url { - background-color: rgba(255, 165, 0, 0.25); - padding: 1% 5%; - display: inline-block; - max-width: 100%; + input { + font-family: inherit; + font-size: inherit; + text-align: inherit; } + .input-combo { + display: flex; + flex-flow: row; + align-items: stretch; + + width: 800px; + max-width: 100%; + margin: auto; + + border: 1px solid grey; + + padding: .5em .5em; + background-color: #FFFAF4; + } + + .input-combo * { + display: inline-block; + line-height: 2em; + border: 0; + background: transparent; + } + + .input-combo > :not(.button) { + max-width: 100%; + flex-grow: 1; + flex-shrink 0; + + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .input-combo .button { + flex-grow: 0; + flex-shrink 1; + + cursor: pointer; + min-width: 2em; + text-align: center; + border-left: 1px solid silver; + color: #06f; + } + + [onclick_title] { + cursor: pointer; + position: relative; + } + + [onclick_title]::before { + opacity: 0; + + content: attr(onclick_title); + font-weight: normal; + + position: absolute; + left: -300%; + + z-index: 1; + + background: grey; + color: white; + + border-radius: 0.5em; + padding: 0 1em; + } + + [onclick_title]:not(:active)::before { + transition: opacity 1s ease-in-out; + } + + [onclick_title]:active::before { + opacity: 1; + } + + .item { background-color: #FFFAF4; border: 1px solid silver; @@ -65,7 +139,15 @@
Your RSS feed is ready. You can enter the following url in your newsreader:
- +