ADDED help/channel_peertube.page Index: help/channel_peertube.page ================================================================== --- help/channel_peertube.page +++ help/channel_peertube.page @@ -0,0 +1,44 @@ + + + + + + + Peertube music/video listings. + + + <media type="image" src="img/channel_peertube.png" /> Peertube + //joinpeertube.org/ + +

PeerTube is a federated video hosting network. And this channel + allows you to browse /Music and other categories. It's not quite a + very rich ecosystem yet, but very international. So perhaps worth a + lookaround.

+ +

The category list seeems to be uniform across most Peertube + instances. So you only need to reload stations/videos once switching + the address in the settings.

+ +

Per default you should use VLC and + youtube-dl in the + playback settings. Per default the faux mime type video/youtube + is used for all listings. However, internally there's a lookup for + an .m3u or direct .mp4 link already. So the video/* entry should + also be populated.

+ +
+ Channel options. + + + <code>🔠 Peertube server</code> +

Sets the main isntance to query video listings from. Now most + of the other sites will be peered, so the main server doesn't + have that much influence. It changes the ordering however, and + will reveal more local videos or languages often.

+
+
+
+ +
Index: help/channel_youtube.page ================================================================== --- help/channel_youtube.page +++ help/channel_youtube.page @@ -10,10 +10,21 @@ <media type="image" src="img/channel_youtube.png" /> Youtube //youtube.com/ +

This plugin is no longer supported or a default + channel. Due to exceeded quotas, it ceased working, and Youtube/Google + bothered me with inane requests for video recordings of how ST2 works + (instead of simply looking at the code or investigating their own logs). + Btw, the exceeded quota was unlikely due to regular ST2 usage. It's + more probable the builtin and plainly-in-sight builtin API key was + reappropriated otherwise. Hence, you would have to + get + your own key now, if you wanted to use this channel. Btw, + overall it's not that interesting / worth the effort IMO.

+

Googles Youtube provides a quirky JSON API that makes browsing channels and genres feasible. This beta plugin provides a little overview, and usually retrieves recent video uploads.

VLC can directly play Youtube URLs. For other players one can use @@ -29,10 +40,16 @@ button simply.

Channel options. + + <code>🔠 API key</code> +

You will have to aquire your own API key now, if you want to + test this plugin. Quite cumbersome, and not recommended, but see + YouTube Data API Overview

+
<code>🔠 Region</code>

With the country dropdown you can predefine which mostPopular listings are returned.

Index: help/html/C.css ================================================================== --- help/html/C.css +++ help/html/C.css @@ -5,156 +5,214 @@ margin: 0; padding: 0; background-color: #ffffff; color: #000000; direction: ltr; } -div.page { - margin: 1em auto 1em auto; - max-width: 60em; - border: solid 1px #babdb6; +article, aside, nav, header, footer, section { + display: block; + margin: 0; + padding: 0; } -div.body { +main { + display: flex; + flex-flow: row; +} +main > * { + flex: 0 0 220px; +} +main > div.page { + flex-grow: 1; margin: 0; - padding-left: 1em; - padding-right: 1em; - padding-bottom: 1em; + display: flex; + flex-flow: column; + align-items: stretch; + justify-content: flex-start; + min-height: 100vh; +} +div.page > article { flex: 1 0 auto; } +div.page > header, div.page > footer { flex: 0 1 auto; } +.pagewide { + max-width: 940px; + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; +} +aside.sidebar { + width: 300px; + padding: 20px 10px; + background: rgb(244,244,244) +} +aside.sidebar-right { order: 3; } +aside.sidebar section { margin-top: 0; } +aside.sidebar * { margin-bottom: 20px; } +aside.sidebar section > div.inner > div.hgroup { + border-bottom: none; +} +aside.sidebar section h2 { + font-size: 1em; + margin-bottom: 0; +} +article { + padding-top: 10px; + padding-bottom: 10px; min-height: 20em; background-color: #ffffff; } -div.header { margin: 0; } -div.footer { margin: 0; } -div.sect { +section { margin-top: 2.4em; clear: both; } -div.sect div.sect { +section section { margin-top: 1.44em; - margin-left: 1.72em; +} +.yelp-hash-highlight { + animation-name: yelp-hash-highlight; + animation-duration: 0.5s; + animation-fill-mode: forwards; +} +@keyframes yelp-hash-highlight { + from { transform: translateY(0px) } + 25% { transform: translateY(20px); } + 50% { transform: translateY(0); } + 75% { transform: translateY(10px); } + to { transform: translateY(0px); } } div.trails { - margin: 0; - padding: 0.5em 1em 0.5em 1em; - background-color: #f3f3f0; + margin: 0 -10px 0 -10px; + padding: 0.2em 10px; + background-color: rgb(244,244,244); } div.trail { - margin: 0.2em 0 0 0; + margin: 0.2em 0; padding: 0 1em 0 1em; text-indent: -1em; - color: #2e3436; + color: rgb(75,75,73); } a.trail { white-space: nowrap; } div.hgroup { - margin: 1em 0 0.5em 0; - color: #2e3436; + margin-bottom: 0.5em; + color: rgb(75,75,73); } -div.sect div.hgroup { +section > div.inner > div.hgroup { margin-top: 0; - border-bottom: solid 1px #babdb6; -} -div.sect-links div.hgroup { - border-bottom: solid 2px #729fcf; -} -div.sect div.sect-links { - margin-left: 0; -} -div.sect div.sect-links div.hgroup { + border-bottom: solid 1px #c0bfbc; +} +section.links > div.inner > div.hgroup { + border-bottom: solid 2px rgb(43,107,185); +} +section section.links > div.inner > div.hgroup { border: none; } h1, h2, h3, h4, h5, h6, h7 { margin: 0; padding: 0; - color: #2e3436; + color: rgb(75,75,73); font-weight: bold; } h1 { font-size: 2em; } h2 { font-size: 1.44em; } h3.title, h4.title, h5.title, h6.title, h7.title { font-size: 1.2em; } h3, h4, h5, h6, h7 { font-size: 1em; } - -p { line-height: 1.72em; } -div, pre, p { margin: 1em 0 0 0; padding: 0; } -div.contents > *:first-child, -th > *:first-child, td > *:first-child, -dt > *:first-child, dd > *:first-child, -li > *:first-child { margin-top: 0; } -div.inner, div.region, div.contents, pre.contents { margin-top: 0; } -pre.contents div { margin-top: 0 !important; } +p { line-height: 1.44em; } +div, pre, p { margin: 0; padding: 0; } +div.contents > * + *, +th > * + *, td > * + *, +dt > * + *, dd > * + *, +li > * + * { margin-top: 1em; } p img { vertical-align: middle; } p.lead { font-size: 1.2em; } div.clear { margin: 0; padding: 0; height: 0; line-height: 0; clear: both; } .center { text-align: center; } -div.about { - color: #2e3436; -} -div.about > div.inner > div.hgroup { +footer.about { margin: 0; } +footer.about > div.inner > div.hgroup { margin: 0; padding: 0; text-align: center; border: none; } -div.about > div.inner > div.hgroup > h2 { +footer.about > div.inner > div.hgroup > h2 { margin: 0; padding: 0.2em; font-size: inherit; } -div.about.ui-expander > div.inner > div.hgroup span.title:before { +footer.about.ui-expander > div.inner > div.hgroup span.title:before { content: ""; } div.copyrights { - margin: 1em; + max-width: 700px; text-align: center; + padding: 10px; + margin: 0 auto; } -div.copyright { - margin: 0; +div.copyright { margin: 0; } +div.credits { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: flex-start; + max-width: 720px; + margin: 0 auto; } -div.aboutblurb { - display: inline-block; +div.credits > * { vertical-align: top; text-align: left; - max-width: 18em; - margin: 0 1em 1em 1em; + flex: 1 0 220px; + margin: 0; + padding: 10px; } +div.credits > *:empty { padding: 0 10px; height: 0; } ul.credits, ul.credits li { margin: 0; padding: 0; list-style-type: none; } ul.credits li { margin-left: 1em; text-indent: -1em; } +div.license { + max-width: 700px; + margin: 0 auto; + padding: 10px; +} table { border-collapse: collapse; - border-color: #2e3436; + border-color: #c0bfbc; border-width: 1px; } td, th { padding: 0.5em; vertical-align: top; - border-color: #2e3436; + border-color: #c0bfbc; border-width: 1px; } thead td, thead th, tfoot td, tfoot th { font-weight: bold; - color: #2e3436; - background-color: #e5e5e3; + color: rgb(75,75,73); + background-color: rgb(234,234,233); } th { text-align: left; font-weight: bold; - color: #2e3436; + color: rgb(75,75,73); } ul, ol, dl { margin: 0; padding: 0; } li { margin: 1em 0 0 0; margin-left: 2.4em; padding: 0; } li:first-child { margin-top: 0; } +@media (max-width: 480px) { + li { + margin-left: 1.44em; + } +} dt { margin-top: 1em; } dt:first-child { margin-top: 0; } dt + dt { margin-top: 0; } dd { margin: 0.2em 0 0 0; @@ -169,52 +227,31 @@ dl.compact dt:first-child { margin-top: 0; } dl.compact dt + dt { margin-top: 0; } a { text-decoration: none; - color: #204a87; + color: rgb(43,107,185); } -a:visited { color: #5c3566; } +a:visited { color: rgb(147,64,167); } a:hover { - border-bottom: dotted 1px #729fcf; + border-bottom: dotted 1px rgb(43,107,185); } p a { - border-bottom: dotted 1px #729fcf; + border-bottom: dotted 1px rgb(43,107,185); } a img { border: none; } -@media only screen and (max-width: 400px) { - div.page { - margin: 0; - border: none; - } - div.body { - padding-left: 0; - padding-right: 0; - } - div.body > div.hgroup, - div.body > div.region > div.contents > *, - div.body > div.region > div.sect > div.inner > div.hgroup > *, - div.body > div.region > div.sect > div.inner > div.region > div.contents > * { - margin-left: 12px; - margin-right: 12px; - } - div.body > div.region > div.sect-links { - margin-left: 0; - margin-right: 0; - } - div.trails { - padding: 12px; - } - li { - margin-left: 1.44em; - } -} - + +.yelp-svg-fill { + fill: rgb(75,75,73); +} +.yelp-svg-stroke { + stroke: rgb(75,75,73); +} div.title { margin: 0 0 0.2em 0; font-weight: bold; - color: #2e3436; + color: rgb(75,75,73); } div.title h1, div.title h2, div.title h3, div.title h4, div.title h5, div.title h6 { margin: 0; font-size: inherit; font-weight: inherit; @@ -224,27 +261,31 @@ div.contents + div.desc { margin: 0.2em 0 0 0; } pre.contents { padding: 0.5em 1em 0.5em 1em; } div.links-center { text-align: center; } -div.links .desc { color: #2e3436; } +div.links .desc { color: rgb(102,102,100); } div.links > div.inner > div.region > div.desc { font-style: italic; } div.links ul { margin: 0; padding: 0; } div.links ul ul { margin-left: 1em; } li.links { margin: 0.5em 0 0.5em 0; padding: 0; - padding-left: 1em; list-style-type: none; } +li.links-head { + margin-top: 1em; + color: rgb(102,102,100); + border-bottom: solid 1px #c0bfbc; +} div.sectionlinks { display: inline-block; padding: 0 1em 0 1em; - background-color: #e6f2ff; - border: solid 1px #729fcf; + background-color: rgb(241,246,253); + border: solid 1px rgb(43,107,185); } div.sectionlinks ul { margin: 0; } div.sectionlinks li { padding: 0; } div.sectionlinks div.title { margin: 0.5em 0 0.5em 0; } div.sectionlinks div.sectionlinks { @@ -254,58 +295,39 @@ border: none; } div.sectionlinks div.sectionlinks li { padding-left: 1.44em; } -div.nextlinks { - font-size: 1.2em; - margin-left: 1.2em; - float: right; - clear: both; -} -div.nextlinks a { - background-color: #f3f3f0; +nav.prevnext { clear: both; } +div.region > nav.prevnext, div.region + nav.prevnext { margin-top: 1em; } +nav.prevnext > div.inner { float: right; } +nav.prevnext > div.inner > * { + background-color: rgb(244,244,244); display: inline-block; position: relative; height: 1.44em; - padding: 0.2em 0.83em; + padding: 0.2em 0.83em 0 0.83em; margin-bottom: 1em; -} -a.nextlinks-prev { margin-left: 0.72em; } -a.nextlinks-next { margin-right: 0.72em; } -a.nextlinks-prev:after, a.nextlinks-next:after { - border: solid transparent; - content: " "; - position: absolute; - height: 0; width: 0; - border-width: 0.92em; - top: 50%; - margin-top: -0.92em; -} -a.nextlinks-prev:after { - right: 100%; - border-right-color: #f3f3f0; -} -a.nextlinks-next:after { - left: 100%; - border-left-color: #f3f3f0; -} -div.nextlinks a:hover { -border: none; - background: #e6f2ff -} -a.nextlinks-prev:hover:after { - border-right-color: #e6f2ff -} -a.nextlinks-next:hover:after { - border-left-color: #e6f2ff + border: solid 1px #c0bfbc; +} +nav.prevnext > div.inner > span { visibility: hidden; } +nav.prevnext > div.inner > a + a { + border-left: none; +} +nav.prevnext > div.inner > a:first-child { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} +nav.prevnext > div.inner > a:last-of-type { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } div.serieslinks { display: inline-block; padding: 0 1em 0 1em; - background-color: #e6f2ff; - border: solid 1px #729fcf; + background-color: rgb(241,246,253); + border: solid 1px rgb(43,107,185); } div.serieslinks ul { margin: 0; } div.serieslinks li { padding: 0; } div.serieslinks div.title { margin: 0.5em 0 0.5em 0; } pre.numbered { @@ -312,79 +334,93 @@ margin: 0; padding: 0.5em; float: left; margin-right: 0.5em; text-align: right; - color: #2e3436; - background-color: #fffacc; + color: rgb(102,102,100); + background-color: rgb(253,251,233); } div.code { - background: url('yelp-code.png') no-repeat top right; - border: solid 1px #babdb6; + border: solid 1px #c0bfbc; } div.example { - border-left: solid 4px #babdb6; + border-left: solid 4px #c0bfbc; padding-left: 1em; } +div.example > div.inner > div.region > div.desc { font-style: italic; } div.figure { + display: inline-block; + max-width: 100%; margin-left: 1.72em; +} +div.figure > div.inner { padding: 4px; - color: #2e3436; - border: solid 1px #babdb6; - background-color: #f3f3f0; + color: rgb(75,75,73); + border: solid 1px #c0bfbc; + background-color: rgb(244,244,244); } -div.figure > div.inner > a.zoom { +@media (max-width: 960px) { + div.figure { + margin-left: 0; + } +} +a.figure-zoom { float: right; } +a.figure-zoom:hover { border-bottom: none; } +a.figure-zoom:hover .yelp-svg-fill { fill: #3584e4; } +a.figure-zoom:hover .yelp-svg-stroke { stroke: #3584e4; } +a.figure-zoom .figure-zoom-out { display: none; } +a.figure-zoom.figure-zoomed .figure-zoom-in { display: none; } +a.figure-zoom.figure-zoomed .figure-zoom-out { display: inline-block; } div.figure > div.inner > div.region > div.contents { margin: 0; padding: 0.5em 1em 0.5em 1em; clear: both; text-align: center; color: #000000; - border: solid 1px #babdb6; + border: solid 1px #c0bfbc; background-color: #ffffff; } div.list > div.inner > div.title { margin-bottom: 0.5em; } div.listing > div.inner { margin: 0; padding: 0; } div.listing > div.inner > div.region > div.desc { font-style: italic; } div.note { padding: 6px; - border: solid 1px #e5e5e3; - background-color: #f3f3f0; -} -div.note > div.inner > div.title { - margin-left: 30px; -} -div.note > div.inner > div.region > div.contents { - margin: 0; padding: 0; - margin-left: 30px; -} -div.note > div.inner { - margin: 0; padding: 0; - background-image: url("yelp-note.png"); - background-position: left top; - background-repeat: no-repeat; - min-height: 24px; -} -div.note-advanced > div.inner { } -div.note-bug > div.inner { background-image: url("yelp-note-bug.png"); } -div.note-important > div.inner { background-image: url("yelp-note-important.png"); } -div.note-tip > div.inner { background-image: url("yelp-note-tip.png"); } -div.note-warning > div.inner { background-image: url("yelp-note-warning.png"); } + border: solid 1px rgb(234,234,233); + background-color: rgb(244,244,244); + display: flex; + flex-flow: row; +} +div.note > * { margin: 0 6px; padding: 0; min-height: 24px; min-width: 24px; } +div.note-warning > svg .yelp-svg-fill { + fill: #c01c28; +} +div.note-danger { + border-color: #c01c28; +} +div.note-important > svg .yelp-svg-fill { + fill: #3584e4; +} +div.note-danger > svg .yelp-svg-fill { + fill: #c01c28; + animation-name: yelp-note-danger; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; +} +@keyframes yelp-note-danger { + from { fill: #c01c28 } + 50% { fill: #c0bfbc } + to { fill: #c01c28 } +} div.note-sidebar { float: right; - max-width: 40%; - margin-left: 6px; + max-width: 206px; + margin-left: 20px; padding: 6px; } -div.note-sidebar > div.inner { background-image: none; } -div.note-sidebar > div.inner > div.title { margin-left: 0px; } -div.note-sidebar > div.inner > div.region > div.contents { margin-left: 0px; } -div.note-plain > div.inner { background-image: none; } -div.note-plain > div.inner > div.title { margin-left: 0px; } -div.note-plain > div.inner > div.region > div.contents { margin-left: 0px; } div.quote { padding: 0; min-height: 48px; } div.quote > div.inner:before { @@ -396,11 +432,11 @@ line-height: 1em; margin: 0; padding: 0; height: 48px; width: 48px; text-align: center; - color: #e5e5e3; + color: rgb(234,234,233); } div.quote > div.inner > div.title { margin: 0; margin-left: 48px; } @@ -410,192 +446,220 @@ } blockquote > *:first-child { margin-top: 0; } div.quote > div.inner > div.region > div.cite { margin-top: 0.5em; margin-left: 48px; - color: #2e3436; + color: rgb(102,102,100); } div.quote > div.inner > div.region > div.cite::before { content: '― '; - color: #2e3436; + color: rgb(102,102,100); } div.screen { - background-color: #f3f3f0; - border: solid 1px #babdb6; + background-color: rgb(244,244,244); + border: solid 1px #c0bfbc; } ol.steps, ul.steps { - margin: 0; padding: 0.5em 1em 0.5em 1em; - border-left: solid 4px #edd400; - -moz-box-shadow: 0 1px 2px #babdb6; - -webkit-box-shadow: 0 1px 2px #babdb6; - box-shadow: 0 1px 2px #babdb6; + border-left: solid 4px #f8e45c; + box-shadow: 0 1px 2px #c0bfbc; } ol.steps .steps { padding: 0; border: none; - background-color: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; + background-color: unset; box-shadow: none; } li.steps { margin-left: 1.44em; } li.steps li.steps { margin-left: 2.4em; } div.synopsis > div.inner > div.region > div.contents, div.synopsis > div.contents, div.synopsis > pre.contents { padding: 0.5em 1em 0.5em 1em; border-top: solid 1px; border-bottom: solid 1px; - border-color: #729fcf; - background-color: #f3f3f0; + border-color: rgb(43,107,185); + background-color: rgb(244,244,244); } div.synopsis > div.inner > div.region > div.desc { font-style: italic; } div.synopsis div.code { - background: none; + background: unset; border: none; padding: 0; } div.synopsis div.code > pre.contents { margin: 0; padding: 0; } +div.unknown > div.inner > div.region > div.desc { font-style: italic; } div.table > div.desc { font-style: italic; } tr.shade { - background-color: #f3f3f0; + background-color: rgb(244,244,244); } td.shade { - background-color: #f3f3f0; + background-color: rgb(244,244,244); } tr.shade td.shade { - background-color: #e5e5e3; + background-color: rgb(234,234,233); } span.app { font-style: italic; } span.cmd { - font-family: monospace; - background-color: #f3f3f0; + font-family: monospace,monospace; font-size: 0.83em; + background-color: rgb(244,244,244); padding: 0 0.2em 0 0.2em; } -span.cmd span.cmd { background-color: none; padding: 0; } -pre span.cmd { background-color: none; padding: 0; } +span.cmd span.cmd { background-color: unset; padding: 0; } +pre span.cmd { background-color: unset; padding: 0; } span.code { - font-family: monospace; - border-bottom: solid 1px #e5e5e3; + font-family: monospace,monospace; font-size: 0.83em; + border-bottom: solid 1px rgb(234,234,233); } span.code span.code { border: none; } pre span.code { border: none; } span.em { font-style: italic; } span.em-bold { font-style: normal; font-weight: bold; - color: #2e3436; + color: rgb(75,75,73); } pre span.error { - color: #a40000; + color: rgb(173,25,36); } -span.file { font-family: monospace; } -span.gui, span.guiseq { color: #2e3436; } -span.input { font-family: monospace; } +span.file { font-family: monospace,monospace; font-size: 0.83em; } +span.gui, span.guiseq { color: rgb(75,75,73); } +span.input { font-family: monospace,monospace; font-size: 0.83em; } pre span.input { font-weight: bold; - color: #2e3436; + color: rgb(75,75,73); } kbd { font-family: inherit; font-size: inherit; - color: #2e3436; - background-color: #f3f3f0; - border: solid 1px #babdb6; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; + color: rgb(75,75,73); + background-color: rgb(244,244,244); + border: solid 1px #c0bfbc; border-radius: 2px; - -moz-box-shadow: 1px 1px 2px #babdb6; - -webkit-box-shadow: 1px 1px 2px #babdb6; - box-shadow: 1px 1px 2px #babdb6; + box-shadow: 1px 1px 2px #c0bfbc; margin: 0 0.2em 0 0.2em; - padding: 0 0.5em 0 0.5em; + padding: 0.2em 0.5em 0 0.5em; white-space: nowrap; } kbd.key-Fn { font-weight: bold; - color: #729fcf; + color: rgb(43,107,185); } span.key a { border-bottom: none; } a > kbd { - color: #204a87; - border-color: #729fcf; + color: rgb(43,107,185); + border-color: rgb(43,107,185); } span.keyseq { - color: #2e3436; + color: rgb(75,75,73); white-space: nowrap } -span.output { font-family: monospace; } +span.output { font-family: monospace,monospace; font-size: 0.83em; } pre span.output { color: #000000; } pre span.prompt { - color: #2e3436; + color: rgb(75,75,73); } -span.sys { font-family: monospace; } +span.sys { font-family: monospace,monospace; font-size: 0.83em; } span.var { font-style: italic; } .ui-tile-img .media-controls { display: none; } span.media-audio, span.media-video { display: inline-block; } audio, video { display: block; margin: 0; } div.media > div.inner { display: inline-block; text-align: center; } -div.media-controls { +.media-controls { min-width: 24em; height: 24px; margin: 0; padding: 0; - border-left: solid 1px #000000;; - border-right: solid 1px #000000;; - border-bottom: solid 1px #000000;; - background-color: #2e3436; + border-left: solid 1px #000000; + border-right: solid 1px #000000; + border-bottom: solid 1px #000000; + background-color: rgb(75,75,73); color: #ffffff; - -moz-border-bottom-left-radius: 4px; - -moz-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -webkit-border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; + display: flex; + align-items: center; } -div.media-controls-audio { - border-top: solid 1px #000000;; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; +.media-audio .media-controls { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.media-controls > * { + flex: 0 1 auto; +} +.media-controls > input.media-range { + flex: 1 0 auto; + background-color: rgb(75,75,73); + margin: 0 10px; + -webkit-appearance: none; +} +input.media-range::-webkit-slider-runnable-track { + height: 4px; + background: rgb(102,102,100); + border-radius: 2px; +} +input.media-range::-webkit-slider-thumb { + -webkit-appearance: none; + height: 16px; + width: 16px; + border-radius: 8px; + background: rgb(234,234,233); + border: solid 1px rgb(75,75,73); + margin-top: -6px; +} +input.media-range::-webkit-slider-thumb:hover, +input.media-range::-webkit-slider-thumb:focus { + background: rgb(244,244,244); +} +input.media-range::-moz-range-track { + height: 4px; + background: rgb(102,102,100); + border-radius: 2px; +} +input.media-range::-moz-range-thumb { + -webkit-appearance: none; + height: 16px; + width: 16px; + border-radius: 8px; + background: rgb(234,234,233); + border: solid 1px rgb(75,75,73); + margin-top: -6px; +} +.media-controls-audio { + border-top: solid 1px #000000; border-radius: 4px; } button.media-play { height: 24px; padding: 0 2px 0 2px; line-height: 0; - float: left; - background-color: #2e3436; + background-color: rgb(75,75,73); border: none; - border-right: solid 1px #000000;; + border-right: solid 1px #000000; } button.media-play:hover, button.media-play:focus { - background-color: #729fcf; -} -button.media-play canvas { margin: 0; } -div.media-range { - display: inline-block; - margin: 2px 8px 0 8px; - padding: 0; - height: 20px; -} -div.media-time { - float: right; + background-color: rgb(43,107,185); +} +button.media-play .yelp-svg-fill { fill: rgb(244,244,244); } +button.media-play .media-pause { display: none; } +button.media-play-playing .media-play { display: none; } +button.media-play-playing .media-pause { display: inline; } +.media-time { margin: 0; font-size: 16px; height: 24px; line-height: 24px; } -div.media-time > span { +.media-time > span { padding-right: 8px; } -span.media-duration { +.media-duration { font-size: 12px; - color: #e5e5e3; + color: rgb(234,234,233); opacity: 0.8; } div.media-ttml { margin: 0; padding: 0; } .media-ttml-pre { white-space: pre; } .media-ttml-nopre { white-space: normal; } @@ -608,67 +672,135 @@ text-align: left; display: none; margin: 6px auto 0 auto; padding: 6px; max-width: 24em; - border: solid 1px #edd400; - background-color: #fffacc; - -moz-box-shadow: 2px 2px 4px #babdb6; - -webkit-box-shadow: 2px 2px 4px #babdb6; - box-shadow: 2px 2px 4px #babdb6; + border: solid 1px rgb(107,99,41); + background-color: rgb(253,251,233); + box-shadow: 2px 2px 4px #c0bfbc; } div.yelp-data { display: none; } -div.ui-expander > div.inner > div.title span.title, -div.ui-expander > div.inner > div.hgroup span.title { +.ui-expander > div.inner > div.title span.title, +.ui-expander > div.inner > div.hgroup span.title { cursor: default; } -div.ui-expander > div.inner > div.title span.title:before, -div.ui-expander > div.inner > div.hgroup span.title:before { - font-size: 2em; - font-weight: normal; +.ui-expander > div.inner > div.title span.title:before, +.ui-expander > div.inner > div.hgroup span.title:before { + font-weight: bold; content: "⌃"; display: inline-block; - line-height: 0.2em; - vertical-align: bottom; - color: #204a87; -} -div.ui-expander-c > div.inner > div.hgroup { border-bottom: none; } -div.ui-expander-e > div.inner > div.title span.title:before, -div.ui-expander-e > div.inner > div.hgroup span.title:before { - content: "⌄"; - vertical-align: top; -} -div.ui-expander > div.inner > div.title:hover, -div.ui-expander > div.inner > div.hgroup:hover * { - color: #204a87; -} -div.ui-expander > div.inner > div.hgroup > .subtitle { + margin: 0; + color: rgb(43,107,185); + transform: translateY(0.2em) rotate(0deg); + -webkit-transform: translateY(0.2em) rotate(0deg); + transition: transform 0.2s linear; + transform-origin: 50% 30%; + -webkit-transform-origin: 50% 30%; + -webkit-transition: -webkit-transform 0.2s linear; + margin: 0 0.2em; +} +.ui-expander-c > div.inner > div.hgroup { border-bottom: none; } +.ui-expander-e > div.inner > div.title span.title:before, +.ui-expander-e > div.inner > div.hgroup span.title:before { + transform: translateY(0.2em) rotate(180deg); + -webkit-transform: translateY(0.2em) rotate(180deg); +} +.ui-expander > div.inner > div.title:hover, +.ui-expander > div.inner > div.hgroup:hover * { + color: rgb(43,107,185); +} +.ui-expander > div.inner > div.hgroup > .subtitle { margin-left: 2em; } -@media only screen and (max-width: 400px) { - div.links { - margin-left: 12px; - margin-right: 12px; - } - li.links { padding: 0; } - div.body > div.region > div.contents > div.example, - div.body > div.region > div.contents > div.steps, - div.body > div.region > div.contents > div.note, - div.body > div.region > div.sect > div.inner > div.region > div.contents > div.example, - div.body > div.region > div.sect > div.inner > div.region > div.contents > div.steps, - div.body > div.region > div.sect > div.inner > div.region > div.contents > div.note { - margin-left: 0; - margin-right: 0; - } - div.steps > div.inner > div.title { - margin-left: 18px; - margin-right: 18px; - } - ol.steps, ul.steps { - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; +.ui-expander-c > div.inner > div.region { + display: none; +} +.ui-expander-e > div.inner > div.region { + animation-name: yelp-ui-expander-e; + animation-duration: 0.2s; + animation-fill-mode: forwards; + transform-origin: 0 0; +} +@keyframes yelp-ui-expander-e { + from { transform: scaleY(0); } + to { transform: scaleY(1); } +} +div.ui-expander-preview > div.inner > div.region { + transform-origin: 0 0; + transition: transform 0.2s linear, background-color 0.2s linear; + animation-name: none; +} +div.ui-expander-preview.ui-expander-c > div.inner { + max-height: 100px; + overflow: hidden; +} +div.ui-expander-preview.ui-expander-c > div.inner > div.region { + display: block; + transform: scaleY(0.4); + background-color: rgb(244,244,244); +} +div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover { + background-color: rgb(241,246,253); + cursor: zoom-in; +} +div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover * { + cursor: zoom-in; +} +div.ui-expander-preview > div.inner > div.region > * { + transform-origin: 0 0; + transition: transform 0.2s linear; +} +div.ui-expander-preview.ui-expander-c > div.inner > div.region > * { + transform: scaleX(0.4); +} +section.ui-expander-preview > div.inner > div.region > div.contents{ + transform-origin: 0 0; + transition: transform 0.2s linear, background-color 0.2s linear; +} +section.ui-expander-preview.ui-expander-c > div.inner { + max-height: 140px; + overflow: hidden; +} +section.ui-expander-preview.ui-expander-c > div.inner > div.region { + display: block; +} +section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents { + transform: scaleY(0.6); + background-color: rgb(244,244,244); +} +section.ui-expander-preview > div.inner > div.region > div.contents > * { + transform-origin: 0 0; + transition: transform 0.2s linear; +} +section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents > * { + transform: scaleX(0.6); +} +section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents:hover { + background-color: rgb(241,246,253); + cursor: zoom-in; +} +@media only screen and (max-width: 480px) { + article > div.region > div.contents > div.example, + article > div.region > section > div.inner > div.region > div.contents > div.example { + margin-left: -10px; + margin-right: -10px; + } + div.example { + padding-left: 6px; + padding-right: 10px; + } + article > div.region > div.contents > div.note, + article > div.region > section > div.inner > div.region > div.contents > div.note { + margin-left: -10px; + margin-right: -10px; + padding-left: 10px; + padding-right: 10px; + } + article > div.region > div.contents > div.note, + article > div.region > section > div.inner > div.region > div.contents > div.note { + border-left: none; + border-right: none; } div.note-sidebar { float: none; max-width: none; margin-left: inherit; @@ -676,51 +808,119 @@ padding-left: inherit; padding-right: inherit; } div.note-sidebar > div.inner > div.title, div.note-sidebar > div.inner > div.region > div.contents { - margin-left: 12px; - margin-right: 12px; + margin-left: 10px; + margin-right: 10px; + } + article > div.region > div.contents > div.steps, + article > div.region > section > div.inner > div.region > div.contents > div.steps { + margin-left: -10px; + margin-right: -10px; + } + div.steps > div.inner > div.title { + margin-left: 10px; + margin-right: 10px; + } + ol.steps, ul.steps { + box-shadow: none; + padding: 0; + padding-left: 6px; + padding-right: 10px; } } -pre.syntax span.function, pre.syntax span.keyword, pre.syntax span.tag { - color: #729fcf; +.hljs a { + color: inherit; + border-bottom: dotted 1px rgb(43,107,185); } -pre.syntax span.string, pre.syntax span.operator { - color: #2e3436; +.hljs a:hover, .hljs a:hover * { color: rgb(43,107,185); } +.hljs-addition { + color: rgb(46,121,73); + background-color: rgb(227,250,236); } +.hljs-deletion { + color: rgb(173,25,36); + background-color: rgb(251,243,244); +} +.hljs-emphasis { font-style: italic; } +.hljs-strong { font-weight: bold; } +.hljs-attr { color: rgb(43,107,185); } +.hljs-attribute { color: rgb(107,99,41); } +.hljs-built_in { color: rgb(150,96,43); } +.hljs-bullet { color: rgb(46,121,73); } +.hljs-class { } +.hljs-code { } +.hljs-comment { color: rgb(102,102,100); } +.hljs-doctag { } +.hljs-formula { color: rgb(75,75,73); } +.hljs-function { } +.hljs-keyword { color: rgb(147,64,167); } +.hljs-link { color: rgb(150,96,43); } +.hljs-literal { color: rgb(150,96,43); } +.hljs-meta { color: rgb(150,96,43); } +.hljs-name { color: rgb(173,25,36); } +.hljs-number { color: rgb(150,96,43); } +.hljs-params { color: rgb(150,96,43); } +.hljs-quote { color: rgb(102,102,100); } +.hljs-regexp { color: rgb(173,25,36); } +.hljs-rest_arg { } +.hljs-section { color: rgb(43,107,185); } +.hljs-string { color: rgb(46,121,73); } +.hljs-subst { } +.hljs-symbol { color: rgb(46,121,73); } +.hljs-tag { color: rgb(173,25,36); } +.hljs-title { color: rgb(43,107,185); } +.hljs-type { } +.hljs-variable { } +.hljs-selector-attr { } +.hljs-selector-class { color: rgb(173,25,36); } +.hljs-selector-id { color: rgb(173,25,36); } +.hljs-selector-tag { color: rgb(147,64,167); } +.hljs-template-tag { } +.hljs-template-variable { } + + +div.links .desc a { + color: inherit; +} +div.links .desc a:hover { + color: rgb(43,107,185); +} +a.bold { font-weight: bold; } + div.link-button { font-size: 1.2em; font-weight: bold; } .link-button a { display: inline-block; - background-color: #729fcf; + background-color: #3584e4; color: #ffffff; - text-shadow: #204a87 1px 1px 0px; - border: solid 1px #204a87; + text-shadow: rgb(43,107,185) 1px 1px 0px; + border: solid 1px rgb(43,107,185); padding: 0.2em 0.5em 0.2em 0.5em; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; border-radius: 2px; } .link-button a:visited { color: #ffffff; } .link-button a:hover { text-decoration: none; color: #ffffff; - box-shadow: 1px 1px 1px #729fcf; + box-shadow: 1px 1px 1px #3584e4; } div.link-button a .desc { display: block; font-weight: normal; font-size: 0.83em; - color: #f3f3f0; + color: rgb(244,244,244); } + + div.floatleft { float: left; margin-right: 1em; } div.floatright { @@ -733,10 +933,11 @@ } div.floatend { float: right; margin-left: 1em; } + div.title-heading h1, div.title-heading h2, div.title-heading h3, div.title-heading h4, div.title-heading h5, div.title-heading h6 { font-size: 1.72em; font-weight: bold; @@ -743,70 +944,96 @@ } ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; } div.links-heading > a { font-size: 1.72em; font-weight: bold; } ul.links-heading > li > div.desc { margin-top: 0.5em; } -div.mouseovers { - width: 250px; - height: 200px; - text-align: center; - margin: 0; - float: left; -} -ul.mouseovers li { margin: 0; } -ul.mouseovers a { - display: inline-block; - padding: 4px 1.2em 4px 1.2em; +div.links-uix-hover { + position: relative; + display: flex; + flex-flow: row nowrap; + align-items: stretch; + justify-content: flex-start; +} +ul.links-uix-hover { flex-grow: 1; } +ul.links-uix-hover li { margin: 0; padding: 0; } +ul.links-uix-hover a { + display: block; + padding: 8px 1.2em; border-bottom: none; } -ul.mouseovers a:hover { - text-decoration: none; - background: #e6f2ff; +ul.links-uix-hover a:hover, ul.links-uix-hover a:focus { + background: rgb(241,246,253); } -ul.mouseovers a img { - display: none; +ul.links-uix-hover img { + display: block; position: absolute; - margin: 0; padding: 0; -} -@media only screen and (max-width: 400px) { - ul.mouseovers a { - display: block; - padding: 12px; - margin-left: -12px; - margin-right: -12px; - } - div.mouseovers { display: none; } -} - -div.ui-screen { - display: none; + top: 0; left: 0; + visibility: hidden; + opacity: 0.0; + transition: opacity 0.6s, visibility 0.6s; +} +ul.links-uix-hover a:hover img, ul.links-uix-hover a:focus img { + visibility: visible; + opacity: 1.0; + transition: opacity 0.2s, visibility 0.2s; +} +@media only screen and (max-width: 480px) { + div.links-uix-hover-img { display: none; } + ul.links-uix-hover img { display: none; } + ul.links-uix-hover li { + margin-left: -10px; margin-right: -10px; + } + ul.links-uix-hover li a { + padding: 10px; + } +} + + +div.ui-overlay-screen { position: fixed; margin: 0; left: 0; top: 0; width: 100%; height: 100%; - background: #2e3436; - opacity: 0.6; + background: rgb(75,75,73); + animation-name: yelp-overlay-screen; + animation-duration: 0.8s; + animation-fill-mode: forwards; +} +@keyframes yelp-overlay-screen { + from { opacity: 0.0; } + to { opacity: 0.6; } } div.ui-overlay { display: none; position: fixed; text-align: center; - left: 0; top: 20px; - width: 100%; + left: 50%; + transform: translateX(-50%); z-index: 10; } +div.ui-overlay-show { + animation-name: yelp-overlay-slide; + animation-duration: 0.8s; + animation-fill-mode: forwards; +} +@keyframes yelp-overlay-slide { + from { transform: translateY(-400px) translateX(-50%); } + to { transform: translateY(0) translateX(-50%); } +} div.ui-overlay > div.inner { display: inline-block; padding: 8px; - background-color: #f3f3f0; - border: solid 1px #2e3436; - box-shadow: 0 2px 4px #2e3436; - -moz-border-radius: 6px; - -webkit-border-radius: 6px; + background-color: rgb(244,244,244); + border: solid 1px rgb(75,75,73); + box-shadow: 0 2px 4px rgb(75,75,73); border-radius: 6px; text-align: left; +} +div.ui-overlay img, div.ui-overlay video { + max-height: 80vh; + max-width: 90vw; } div.ui-overlay > div.inner > div.title { margin-top: -4px; } a.ui-overlay-close { display: block; float: right; @@ -816,161 +1043,199 @@ margin-top: -28px; margin-right: -24px; padding: 1px 2px 3px 2px; text-align: center; border: none; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; border-radius: 50%; background-color: #000000; - background-image: -moz-radial-gradient(50% 30%, circle farthest-corner, #2e3436, #000000); - background-image: radial-gradient(50% 30%, circle farthest-corner, #2e3436, #000000); - background-image: -webkit-radial-gradient(50% 30%, circle farthest-corner, #2e3436, #000000); + background-image: radial-gradient(circle farthest-corner at 50% 30%, rgb(75,75,73), #000000); border: 3px solid #ffffff; color: #ffffff; box-shadow: 0 2px 2px #000000; text-shadow: 0 2px 2px #000000; } -a.ui-overlay-close:hover { -} - -div.ui-tile { - display: inline-block; - vertical-align: top; - clear: both -} -div.region > div.ui-tile { - margin-top: 0; - margin-bottom: 1em; -} -div.ui-tile:first-child { margin-top: 1em; } -div.ui-tile > a { - display: inline-block; - vertical-align: top; - margin: 0; - margin-right: 1em; - padding: 1em; - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - border-radius: 6px; -} -div.ui-tile > a { - border: solid 1px #f3f3f0; -} -div.ui-tile > a:hover { - border: solid 1px #e6f2ff; - box-shadow: 0 1px 2px #729fcf; -} -div.ui-tile > a > * { display: block; } -div.ui-tile-side > a > * { - display: inline-block; - vertical-align: top; -} -div.ui-tile-side > a > span.ui-tile-text { - margin-left: 1em; -} -div.ui-tile > a > span.ui-tile-text > span.title { - display: block; - margin-top: 0.5em; - font-weight: bold; -} -div.ui-tile-side > a > span.ui-tile-text > span.title { margin-top: 0; } -div.ui-tile > a > span.ui-tile-text > span.desc { - display: block; - margin: 0.2em 0 0 0; - color: #2e3436; -} -span.ui-tile-img { text-align: center; } - -div.links-ui-hover { - text-align: center; - margin: 0; - float: left; - margin-right: 1.2em; - overflow: hidden; -} -ul.links-ui-hover li { margin: 0; } -ul.links-ui-hover a { - display: block; - padding: 4px 1.2em 4px 1.2em; - border-bottom: none; -} -ul.links-ui-hover a:hover { - text-decoration: none; - background: #e6f2ff; -} -span.links-ui-hover-img { - display: none; - position: absolute; - margin: 0; padding: 0; - overflow: hidden; - background: #e6f2ff; - text-align: center; -} -@media only screen and (max-width: 400px) { - ul.links-ui-hover a { - display: block; - padding: 12px; - margin-left: -12px; - margin-right: -12px; - } - div.links-ui-hover { display: none; } -} - -div.links-grid { - display: inline-block; - clear: both - margin-top: 1em; - width: 30%; - margin-right: 2%; - vertical-align: top; -} -div.links-grid-link { - margin: 0; - font-weight: bold; -} -div.links-grid > div.desc { - margin: 0; - color: #2e3436; -} -@media only screen and (max-width: 400px) { - div.links-grid { - width: 47%; - } -} - -div.links-twocolumn { - display: inline-block; - width: 48%; - margin-top: 0; - margin-right: 1%; - vertical-align: top; -} -@media only screen and (max-width: 400px) { - div.links-twocolumn { + + +div.links-tiles { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: stretch; + vertical-align: top; + clear: both; + margin: 0 -10px; +} +div.links-tile { + max-width: 300px; + flex: 1 0 300px; + vertical-align: top; + margin: 0; + padding: 10px; +} +div.links-tiles > div.links-tile { max-width: none; } +div.links-tile:empty { padding: 0 10px; height: 0; } +div.links-tile > a { + display: block; + vertical-align: top; + padding: 9px; + border-radius: 6px; + border: solid 1px #ffffff; +} +div.links-tile > a:hover { + border: solid 1px rgb(241,246,253); + box-shadow: 0 1px 2px #3584e4; +} +div.links-tile > a > span.links-tile-img { + display: block; + text-align: center; +} +div.links-tile > a > span.links-tile-img > img { + width: 100%; + border-radius: 3px; +} +div.links-tile > a > span.links-tile-text > span.title { + display: block; + font-weight: bold; +} +div.links-tile > a > span.links-tile-text > * + span.title { + margin-top: 0.5em; +} +div.links-tile > a > span.links-tile-text > span.desc { + display: block; + margin: 0.2em 0 0 0; + color: rgb(75,75,73); +} + + +div.links-grid-container { + margin-left: -10px; + margin-right: -10px; + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: flex-start; + vertical-align: top; + clear: both; +} +div.links-grid { + flex: 1 0 300px; + padding: 10px; +} +div.links-grid:empty { padding: 0 10px; height: 0; } +div.links-grid-link { font-weight: bold; } +div.links-grid > div.desc { + margin: 0.2em 0 0 0; + color: rgb(75,75,73); +} + + + +div.links-norwich { + width: 900px; +} +div.links-norwich-primary { + float: left; + vertical-align: top; + margin: 0; padding: 0; +} +div.links-norwich-big { + vertical-align: top; + display: inline-block; + background: rgb(241,246,253); + background: radial-gradient(ellipse 800px 1200px at 100% 20px, rgb(241,246,253), #3584e4); + margin: 0 20px 20px 0; +} +div.links-norwich-big + div.links-norwich-big { + background: rgb(253,251,233); + background: radial-gradient(ellipse 800px 1200px at 100% 20px, rgb(253,251,233), #f8e45c); +} +div.links-norwich-big a { + display: block; + width: 230px; + height: 500px; + height: 320px; + padding: 9px; + font-size: 1.2em; + color: #000000; + border: solid 1px #3584e4; + background-repeat: no-repeat; + background-position: right -80px bottom -80px; +} +div.links-norwich-big a:hover { + border: solid 1px #3584e4; + box-shadow: 2px 2px 2px #3584e4; +} +div.links-norwich-big a span.title { + font-size: 1.2em; + font-weight: bold; +} +div.links-norwich-big a .desc { + color: #000000; + font-weight: normal; +} +div.links-norwich-secondary { + vertical-align: top; + margin: 0; padding: 0; +} +div.links-norwich-small { + display: inline-block; + vertical-align: top; + background: rgb(244,244,244); + margin: 0 20px 20px 0; +} +div.links-norwich-small a { + display: block; + width: 140px; + height: 140px; + padding: 9px; + font-weight: bold; + color: #000000; + border: solid 1px #c0bfbc; + background-repeat: no-repeat; + background-position: right 4px bottom 4px; +} +div.links-norwich-small a:hover { + border: solid 1px #c0bfbc; + box-shadow: 2px 2px 2px #3584e4; +} +@media only screen and (max-width: 900px) { + div.links-norwich { + width: 720px; + } +} +@media only screen and (max-width: 720px) { + div.links-norwich { + width: 540px; + } +} +@media only screen and (max-width: 540px) { + div.links-norwich { + width: 100%; + } + div.links-norwich-big { width: 100%; margin-right: 0; } -} - -div.links .desc a { - color: inherit; -} -div.links .desc a:hover { - color: #204a87; -} -a.bold { font-weight: bold; } -div.linkdiv { margin: 0; padding: 0; } + div.links-norwich-big a { + width: auto; + } +} + + +div.links-divs { + margin-left: -10px; + margin-right: -10px; +} a.linkdiv { display: block; margin: 0; - padding: 0.5em; + padding: 10px; border-bottom: none; } a.linkdiv:hover { text-decoration: none; - background-color: #e6f2ff; + background-color: rgb(241,246,253); } a.linkdiv > span.title { display: block; margin: 0; font-size: 1em; @@ -978,36 +1243,42 @@ color: inherit; } a.linkdiv > span.desc { display: block; margin: 0.2em 0 0 0; - color: #2e3436; + color: rgb(75,75,73); } span.linkdiv-dash { display: none; } -@media only screen and (max-width: 400px) { - div.linkdiv { - margin-left: -12px; - margin-right: -12px; - } - div.linkdiv a { - padding-left: 12px; - padding-right: 12px; - } -} +div.links-twocolumn { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: flex-start; + vertical-align: top; + margin-left: -10px; + margin-right: -10px; +} +div.links-twocolumn > div.links-divs { + flex: 1 0 320px; + vertical-align: top; + margin: 0; +} + div.comment { padding: 0.5em; - border: solid 2px #ef2929; - background-color: #ffdede; + border: solid 2px #c01c28; + background-color: rgb(251,243,244); } div.comment div.comment { margin: 1em 1em 0 1em; } div.comment div.cite { margin: 0 0 0.5em 0; font-style: italic; } + div.tree > div.inner > div.title { margin-bottom: 0.5em; } ul.tree { margin: 0; padding: 0; list-style-type: none; @@ -1016,86 +1287,96 @@ li.tree div { margin: 0; padding: 0; } ul.tree ul.tree { margin-left: 1.44em; } div.tree-lines ul.tree { margin-left: 0; } + span.hi { - background-color: #fffacc; -} - -div.facets { - display: inline-block; - padding: 6px; - background-color: #fffacc; - border: solid 1px #729fcf; -} -div.facet { - vertical-align: top; - display: inline-block; - margin-top: 0; - margin-bottom: 1em; - margin-right: 1em; -} -div.facet div.title { margin: 0; } -div.facet li { - margin: 0; padding: 0; - list-style-type: none; -} -div.facet input { - vertical-align: middle; - margin: 0; -} + background-color: rgb(253,251,233); +} +span.hi.hi-ins { + background-color: rgb(227,250,236); +} +span.hi.hi-del { + background-color: rgb(251,243,244); + text-decoration: line-through; +} +span.hi.hi-ins ins { text-decoration: none; } +span.hi.hi-del del { text-decoration: none; } +span.hi.hi-red { background-color: rgb(251,243,244); } +span.hi.hi-orange { background-color: rgb(255,243,231); } +span.hi.hi-yellow { background-color: rgb(253,251,233); } +span.hi.hi-green { background-color: rgb(227,250,236); } +span.hi.hi-blue { background-color: rgb(241,246,253); } +span.hi.hi-purple { background-color: rgb(249,243,250); } +span.hi.hi-gray { background-color: rgb(244,244,244); } + + dt.gloss-term { margin-top: 1.2em; font-weight: bold; - color: #2e3436; + color: rgb(75,75,73); } dt.gloss-term:first-child, dt.gloss-term + dt.gloss-term { margin-top: 0; } dt.gloss-term + dd { margin-top: 0.2em; } dd.gloss-link { margin: 0 0.2em 0 0.2em; - border-left: solid 4px #729fcf; + border-left: solid 4px #3584e4; padding-left: 1em; } dd.gloss-def { margin: 0 0.2em 1em 0.2em; - border-left: solid 4px #babdb6; + border-left: solid 4px #c0bfbc; padding-left: 1em; } a.gloss-term { - tabindex: 0; - border-bottom: dashed 1px #729fcf; + position: relative; + border-bottom: dashed 1px #3584e4; } a.gloss-term:hover { text-decoration: none; border-bottom-style: solid; } span.gloss-desc { display: none; position: absolute; + z-index: 100; margin: 0; + left: 0; + top: 1.2em; padding: 0.2em 0.5em 0.2em 0.5em; + min-width: 12em; max-width: 24em; - color: #2e3436; - background-color: #fffacc; - border: solid 1px #edd400; - -moz-box-shadow: 2px 2px 4px #babdb6; - -webkit-box-shadow: 2px 2px 4px #babdb6; - box-shadow: 2px 2px 4px #babdb6; + overflow: hidden; + color: rgb(75,75,73); + background-color: rgb(253,251,233); + border: solid 1px #f8e45c; + box-shadow: 2px 2px 4px #c0bfbc; +} +a.gloss-term:hover span.gloss-desc, a.gloss-term:focus span.gloss-desc { + display: inline-block; + animation-name: yelp-gloss-fade; + animation-duration: 1s; + animation-fill-mode: forwards; +} +@keyframes yelp-gloss-fade { + from { opacity: 0.0; } + to { opacity: 1.0; } } + .if-if { display: none; } .if-choose, .if-when, .if-else { margin: 0; padding: 0; } .if-choose > .if-when { display: none; } .if-choose > .if-else { display: block; } .if-if.if__not-target-mobile { display: block; } .if-choose.if__not-target-mobile > .if-when { display: block; } .if-choose.if__not-target-mobile > .if-else { display: none; } -@media only screen and (max-width: 400px) { +@media only screen and (max-width: 480px) { .if-if.if__target-mobile { display: block; } .if-if.if__not-target-mobile { display: none; } .if-choose.if__target-mobile > .if-when { display: block; } .if-choose.if__target-mobile > .if-else { display: none; } .if-choose.if__not-target-mobile > .if-when { display: none; } .if-choose.if__not-target-mobile > .if-else { display: block; } } Index: help/html/bookmarks.html ================================================================== --- help/html/bookmarks.html +++ help/html/bookmarks.html @@ -1,26 +1,31 @@ + Bookmarks - + -
-
+

Subcategories

+

The bookmarks tab can display other categories besides "favourite". For example the search feature creates a "search", while the "timer" and "links" plugins also display lists here.

-

However the favourite list itself can not yet be categorized - further.

-
-
-
-
- - - +
+ Index: help/html/channels.html ================================================================== --- help/html/channels.html +++ help/html/channels.html @@ -1,20 +1,25 @@ + Channels - + -
-
-
-

Channels

+
+

Channels

-
+

The tabs in the main window represent the music directory channels/services. Each lists categories/genres and their associated radios/streams.

The notebook tabs can also be repositioned with Edit ▸ Channel tab position ▸ Top. @@ -29,18 +34,19 @@

Individual channels provide different music/radio information. The table views are however mostly identical for each tab. Some views may rename columns, or remove them alltogether.

-
-

Available channels

-
-
-

Channel menu actions

-
+
+

Channel menu actions

+
Homepage of directory service

Opens the website of the currently selected channel in your configured web browser.

Reload
@@ -78,19 +82,16 @@ channels when the list is empty.

The channel menu also contains a list of available channels. Select an entry to switch into that tab.

-
- - -
+
+
Index: help/html/cli.html ================================================================== --- help/html/cli.html +++ help/html/cli.html @@ -1,20 +1,25 @@ + CLI (command line interface) - + -
- -
-

CLI (command line interface)

+
+

CLI (command line interface)

-
+

Streamtuner2 is a graphical tool. But it also has a limited commandline interface, which can be used to query station information. This is useful for interfacing with other applications.

Open a terminal and call streamtuner2 help to get an overview over available commands.

@@ -38,13 +43,13 @@

Specifying a channel name is often optional. If you add one, it should be all-lowercase. You can also give a list, like "shoutcast,xiph" which would be searched then.

-
-

GUI options

-
+
+

GUI options

+

There are also a few command line flags, which influence the graphical runtime.

  • --gtk3

    @@ -81,19 +86,16 @@

    -x

    Exit right away. A flag only used for testing.

-
- - -
+
+
Index: help/html/config_apps.html ================================================================== --- help/html/config_apps.html +++ help/html/config_apps.html @@ -1,20 +1,25 @@ + Audio players - + -
- -
-

Audio players

+
+

Audio players

-
+

On BSD/Linux systems there are a plethora of audio players. In streamtuner2 you can configure most of them as target application. Mostly it makes sense to use a single application for all audio formats. But at least the */* media type should be handled by a generic player, like vlc.

@@ -56,13 +61,13 @@ works better. (And sometimes not.)

Some applications, like Rhythmbox or Banshee, are primarily playlist managers, not players, and cannot be invoked with a station URL. This makes them less suitable for use with streamtuner2. (Same goes for streamtuner2 itself. It's not a player, but just a playlist browser.)

-
-

URL placeholders

-
+
+

URL placeholders

+

Listed audio players get run with a streaming server address (URL). These can either be direct MP3/Ogg servers (http://example.org:7843/) and sometimes playlist files (http://example.org/listen.pls) - depending on the channel directory.

Most audio players automatically handle any station URLs. Some however @@ -116,23 +121,27 @@ already provide PLS files, which avoids any extra conversion by ST2 which sometimes delay playback.)

A few channels (like Jamendo) send custom JSON playlist snippets, which no audio player would understand. Which is why they're always pre-converted.

-
+
+ + + +

Most audio players like %pls, yet sometimes the older %m3u format more. Streamripper requires %srv for recording.

Use the newer %xspf format if your player supports it. This format retains the maximum of station infos (such as homepages etc.), and thus often makes for better bookmarking directly in your player.

-
-
+
+
-
-

Other placeholders

-
+
+

Other placeholders

+

In addition to stream URL + type placeholders (%r, %x, %pls, %m3u, etc), you can also pass station info placeholders. These contain the stream information like title or bitrate, or any other internal field:

@@ -182,96 +191,138 @@

If bookmarked

Not all fields are used in all channels. Sometimes they're repurposed (like playing often doubles as Location: field). And some channels may even use custom internal names.

-

You often want to use such placeholders if you have a player or recording shell script, such as +

+ + + +

You often want to use such placeholders if you have a player or recording shell script, such as contrib/cmdline/streamripper_addgenre to handle them. Or if you define a mini-toolbar specbutton - with custom commands.

-
+ with custom commands.

+
-
-

Other players

-
+
+

Other players

+

Here a few other configuration examples for other players/backends.

MPD

Rocus van Oosten recommends following wrapper script to start playing radio streams via MPD right away:

-
MPD_HOST='10.0.0.222' # or your MPD host
+
MPD_HOST='10.0.0.222' # or your MPD host
 export MPD_HOST
 mpc clear
 mpc load $1
-mpc play
+mpc play

Save it as mpc-pls script and configure it in streamtuner as mpc-pls %pls for example. You can find an extended version in the contrib/cmdline/ directory.

-
-
-

Windows config

-
+
+

Windows config

+

There's a few things you have to take care of when configuring players and recording apps on Windows. Common applications and settings would be:

- + - + - + - + - +

Player config

audio/mpeg

wmplayer.exe %asx

Windows media player doesn't understand PLS or M3U files.

+ + + + + + + + + +

Windows media player doesn't understand PLS or M3U files.

+

video/*

C:\Programs\VLC\vlc.exe %srv

VLC pretty much works alike on Windows.

+ + + +

VLC pretty much works alike on Windows.

+

url/http

"C:/Program Files/Mozilla Firefox/firefox.exe" %url

It's best to enclose paths with spaces in quotes.

+ + + +

It's best to enclose paths with spaces in quotes.

+

url/http

iexplore.exe %url

IE is not recommended, of course.

+ + + +

IE is not recommended, of course.

+

Recording apps

audio/*

/D "C:\Programs\Streamripper" streamripper.exe %srv

Command line programs need the /D switch first, then its path enclosed in quotes and a space before the program.

+ + + + + + + + + +

Command line programs need the /D switch first, then its path enclosed in quotes and a space before the program.

+

You can avoid a few issues: if you put your executables in paths without spaces, or set the system $PATH variable accordingly.

-

As reported by Oliver in the sourceforge Discussion -board.

-
+
+ + + +

As reported by Oliver in the sourceforge Discussion +board.

+
-
-
-
- -
+
+
Index: help/html/configuration.html ================================================================== --- help/html/configuration.html +++ help/html/configuration.html @@ -1,20 +1,25 @@ + Configuration / Settings dialog - + -
- -
-

Configuration / Settings dialog

+
+

Configuration / Settings dialog

-
+

There are various options for streamtuner2, available under Edit ▸ Preferences or via F12.

@@ -40,13 +45,13 @@

The Plugin Manager 2 adds another tab for updating or installing new plugins.

-
-

Player application settings

-
+
+

Player application settings

+

MIME types are abstract identifiers for media types. Audio/mpeg for example represents MP3 files, and audio/ogg means OGG Vorbis. And the player setting dialog simply associates an audio type with a playback application:

    @@ -83,16 +88,15 @@

  • You can remove existing entries by clearing both the Format field and its associated Application. Add completely new associations through the emtpy line.

- +
-
-
-

Recording Apps

-
+
+

Recording Apps

+

The second block of entries in the 'Apps' section specifies recording applications. Here streamripper is preconfigured for audio streams, and youtube-dl for Youtube videos for instance.

@@ -103,16 +107,15 @@

audio/*

xterm -e "youtube-dl %srv"

To define a target directory, you can often add commandline arguments to each. Also it's typically helpful to leave the xterm prefix on, so you can follow the processing state.

- +
-
-
-

Display/GUI options

-
+
+

Display/GUI options

+

Display settings

☑ Show bookmark star

Bookmarked stations will be marked with a ★ star in all other station lists / categories. @@ -175,17 +178,22 @@

Per default most server playlists (be they .pls or .m3u, .xpsf) are converted. All player/recording apps receive a default %pls file normally. Set this option to disable any such placeholders from the Player tab, and avoid streamtuner2 pre-downloading any m3u/pls/xspf. Instead your audio player gets passed the literal server/playlist streaming URL then.

-

Note that this is only +

+ + + +

Note that this is only a minor speedup, but may trip up some applications. A few channel sources don't even provide standard stream addresses and playlists. (Jamendo albums for example really need pre-conversion; no audio player can deal with such custom JSON playlists). In short: you don't normally want to enable this flag - unless you run into problems with streamtuner2 taking too long, or when it hangs by accidentially downloading streams - itself.

+ itself.

+

System

@@ -217,15 +225,14 @@ appear slower at times, and freeze between fetching lists, but remains stable on the upside. There's also a command line flag --nt to enable this workaround.

-
-
-

Channel and feature plugins and settings

+
+

Channel and feature plugins and settings

-
+
@@ -234,14 +241,16 @@ to take effect. (Unless the Plugin Manager 2 is enabled, with its 📦 Add tab visible.)

Each plugin can have its own little list of extra options. They'll be applied right away for already active channel/feature plugins.

- - -
-
-

If you want to find out more about the short option descriptions (most settings are checkboxes), +

+
+
+ + + +

If you want to find out more about the short option descriptions (most settings are checkboxes), please have a look into the channels directory /usr/share/streamtuner2/channels/ and corresponding - *.py files. These are somewhat readable even to non-programmers, and sometimes contain more information.

-
-
+
-
-
- - +
+ Index: help/html/contrib_channels.html ================================================================== --- help/html/contrib_channels.html +++ help/html/contrib_channels.html @@ -1,142 +1,114 @@ +→ Contrib/Extra Channels - + -
-

The 📻 Channels tab shows all available directory services.

While the 🔌 Features group provides internal or menu enhancements.

Uses a "forward" function key. (default)

To define another channel as source, enter its module name in the according field. Also add a category separated by : colon here.

-

If the configured keyboard shortcut conflicts +

+ + + + + + + + + +

If the configured keyboard shortcut conflicts with another application, it won't work. And if you choose it too generic, you won't be able to type longer documents. Also found - out: key names are case sensitive.

+ out: key names are case sensitive.

+
-
-
-
- -
+
+
Index: help/html/glossary.html ================================================================== --- help/html/glossary.html +++ help/html/glossary.html @@ -1,20 +1,25 @@ + Glossary - + -
-
-
-

Glossary

+
+

Glossary

-
+
Channel

Each tab in the main window is a "channel". It represents one music directory service.

Stream
@@ -72,26 +77,23 @@ at lower "bitrates". For MP3 files any music with less than 100 kbit/s starts to hiss, while OGG Vorbis still sounds okay at a datarate of e.g. 64 kbit per second. So while bitrate basically means file size per duration, it's commonly used as quality indicator.

-
-

Filetypes

-
+
+

Filetypes

+

Besides audio formats MP3 and OGG, there are also station/streaming link files. These are often downloaded from the directory servers, before your music player gets activated.

- +
-
- - -
+
+
ADDED help/html/highlight.pack.js Index: help/html/highlight.pack.js ================================================================== --- help/html/highlight.pack.js +++ help/html/highlight.pack.js cannot compute difference between binary files Index: help/html/homepage.html ================================================================== --- help/html/homepage.html +++ help/html/homepage.html @@ -1,49 +1,51 @@ + Radio homepages - + -
-
ADDED help/html/img/channel_liveradio.png Index: help/html/img/channel_liveradio.png ================================================================== --- help/html/img/channel_liveradio.png +++ help/html/img/channel_liveradio.png cannot compute difference between binary files ADDED help/html/img/channel_peertube.png Index: help/html/img/channel_peertube.png ================================================================== --- help/html/img/channel_peertube.png +++ help/html/img/channel_peertube.png cannot compute difference between binary files Index: help/html/img/channel_radiobrowser.png ================================================================== --- help/html/img/channel_radiobrowser.png +++ help/html/img/channel_radiobrowser.png cannot compute difference between binary files Index: help/html/index.html ================================================================== --- help/html/index.html +++ help/html/index.html @@ -1,47 +1,52 @@ + ♪ Streamtuner2 - + -
-
-
-

♪ Streamtuner2

+
+

♪ Streamtuner2

-

Streamtuner2 shows internet radio stations for easy browsing, playing, recording.

-
-

Browsing channels and radio stations

-
-
-
-

Additional features

-
+
+
+
+

About

-
+
+
Written By
  • Mario Salzer
-
-
-
+
+
+
+
+
Index: help/html/internet_radio_org_uk.html ================================================================== --- help/html/internet_radio_org_uk.html +++ help/html/internet_radio_org_uk.html @@ -1,58 +1,60 @@ + Internet-Radio - + -
-