├── .bundle └── config ├── .gitignore ├── .mailmap ├── CNAME ├── Gemfile ├── Gemfile.lock ├── README.md ├── _config.yml ├── _data └── authors.yml ├── _ext ├── alsamixer.md ├── autoplay.md ├── bandcamp.md ├── beets.md ├── dleyna.md ├── file.md ├── funkwhale.md ├── headless.md ├── http.md ├── internetarchive.md ├── iris.md ├── jamendo.md ├── jellyfin.md ├── listenbrainz.md ├── local.md ├── mixcloud.md ├── mobile.md ├── mopster.md ├── mowecl.md ├── mpd.md ├── mpris.md ├── muse.md ├── musicbox-webclient.md ├── nad.md ├── orfradio.md ├── pandora.md ├── party.md ├── pibox.md ├── pidi.md ├── podcast-itunes.md ├── podcast.md ├── radionet.md ├── raspberry-gpio.md ├── scrobbler.md ├── softwaremixer.md ├── somafm.md ├── soundcloud.md ├── spotify.md ├── stream.md ├── subidy.md ├── tidal.md ├── tunein.md ├── webm3u.md ├── youtube.md └── ytmusic.md ├── _includes ├── blog-authors.html ├── ext-buttons.html ├── ext-footer.html ├── ext-stats.html └── ext-type-list.html ├── _layouts ├── base.html ├── default.html ├── ext.html └── post.html ├── _posts ├── 2013-01-09-mopidy-in-the-browser.md ├── 2014-10-28-debian-packaging.md ├── 2018-12-02-4y-of-js-churn.md ├── 2018-12-07-mopidy-mpris-2.0.md ├── 2019-12-22-mopidy-3.0.md ├── 2019-12-23-10y-of-mopidy.md └── 2019-12-27-mopidy-3-faq.md ├── _sass └── bulma-0.8.0 │ ├── base │ ├── _all.sass │ ├── generic.sass │ ├── helpers.sass │ └── minireset.sass │ ├── components │ ├── _all.sass │ ├── breadcrumb.sass │ ├── card.sass │ ├── dropdown.sass │ ├── level.sass │ ├── list.sass │ ├── media.sass │ ├── menu.sass │ ├── message.sass │ ├── modal.sass │ ├── navbar.sass │ ├── pagination.sass │ ├── panel.sass │ └── tabs.sass │ ├── elements │ ├── _all.sass │ ├── box.sass │ ├── button.sass │ ├── container.sass │ ├── content.sass │ ├── form.sass │ ├── icon.sass │ ├── image.sass │ ├── notification.sass │ ├── other.sass │ ├── progress.sass │ ├── table.sass │ ├── tag.sass │ └── title.sass │ ├── form │ ├── _all.sass │ ├── checkbox-radio.sass │ ├── file.sass │ ├── input-textarea.sass │ ├── select.sass │ ├── shared.sass │ └── tools.sass │ ├── grid │ ├── _all.sass │ ├── columns.sass │ └── tiles.sass │ ├── layout │ ├── _all.sass │ ├── footer.sass │ ├── hero.sass │ └── section.sass │ └── utilities │ ├── _all.sass │ ├── animations.sass │ ├── controls.sass │ ├── derived-variables.sass │ ├── functions.sass │ ├── initial-variables.sass │ └── mixins.sass ├── auth └── spotify.html ├── authenticate └── index.html ├── blog └── index.html ├── ext ├── dists.html └── index.html ├── github-btn.html ├── index.html ├── media ├── css │ └── mopidy.scss ├── ext │ ├── api-explorer.jpg │ ├── auto.jpg │ ├── bandcamp.png │ ├── iris.jpg │ ├── jamendo.jpg │ ├── jellyfin.png │ ├── jukepi.jpg │ ├── listenbrainz.svg │ ├── material-webclient.jpg │ ├── mobile.jpg │ ├── moped.png │ ├── mopify.png │ ├── mopster.png │ ├── mowecl.png │ ├── muse-logo.png │ ├── muse.jpg │ ├── musicbox-webclient.jpg │ ├── party.jpg │ ├── pibox-logo.png │ ├── pibox.png │ ├── simple-webclient.jpg │ ├── soundcloud.png │ ├── spotify.png │ ├── tidal.png │ ├── touchscreen.jpg │ ├── tunein.png │ └── youtubemusic.png ├── favicon │ ├── favicon-16x16.png │ └── favicon-32x32.png ├── images │ ├── hannah-troupe-wL_w5t_OKtI-unsplash-1900x1200.jpg │ ├── hannah-troupe-wL_w5t_OKtI-unsplash.jpg │ ├── mopidy-screenshot.jpg │ └── raspberry_pi_4b.jpg └── js │ └── mopidy.js ├── robots.txt └── soundcloud_callback └── index.html /.bundle/config: -------------------------------------------------------------------------------- 1 | --- 2 | BUNDLE_PATH: ".bundle/vendor" 3 | BUNDLE_DISABLE_SHARED_GEMS: "true" 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.bundle/vendor/ 2 | /_site/ 3 | -------------------------------------------------------------------------------- /.mailmap: -------------------------------------------------------------------------------- 1 | Nick Steel 2 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | mopidy.com -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'github-pages', group: :jekyll_plugins 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mopidy website 2 | 3 | This repo is the source for https://mopidy.com, hosted at GitHub Pages. 4 | 5 | The documentation site, https://docs.mopidy.com, does not use this repo. It is 6 | based on the `docs/` dir of the main Mopidy repo, and is hosted by [Read The 7 | Docs](https://readthedocs.org/). 8 | 9 | 10 | ## Running locally 11 | 12 | See the docs on [Testing your GitHub Pages site locally with Jekyll][1]. 13 | 14 | [1]: https://help.github.com/en/articles/testing-your-github-pages-site-locally-with-jekyll 15 | 16 | 17 | ## Deploying changes 18 | 19 | To update https://mopidy.com, make changes to the source, commit, and push to 20 | `git@github.com:mopidy/website.git`. 21 | 22 | That's it. 23 | 24 | 25 | ## Extension registry 26 | 27 | This extension registry is a community effort, and will never be complete 28 | without your help. 29 | 30 | To add or update an extension, use the existing extension definitions in the 31 | `_ext/` directory for inspiration. Submit your update as a pull request on 32 | this repo. 33 | 34 | The source files for the Mopidy extension registry can be found in the 35 | `_ext/` directory. Any related images are in the `media/ext/` directory. 36 | 37 | The "front matter" part of the extension definitions is a YAML data structure 38 | with the following fields: 39 | 40 | ``` yaml 41 | ### Required fields: 42 | 43 | title: Mopidy-Foo # Name of extension 44 | type: backend # One of "backend"/"frontend"/"mixer"/"web" 45 | 46 | ### Optional fields: 47 | 48 | dev: # Development related fields 49 | github: mopidy/mopidy-foo # GitHub repo 50 | circleci: true # Whether using CircleCI 51 | travisci: false # Whether using Travis CI 52 | codecov: true # Whether using Codecov code coverage 53 | coveralls: false # Whether using Coveralls code coverage 54 | 55 | dist: # Distribution related fields: 56 | pypi: Mopidy-Foo # PyPI package name 57 | apt-debian: mopidy-foo # Debian/Ubuntu package name 58 | apt-mopidy: mopidy-foo # apt.mopidy.com package name 59 | arch-aur: mopidy-foo # Arch Linux AUR package name 60 | fedora: mopidy-foo # Fedora package name 61 | rpmfusion: mopidy-foo # RPM Fusion package name 62 | homebrew: 63 | tap: mopidy/mopidy # Homebrew tap name 64 | formula: mopidy-foo # Homebrew formula name in above tap 65 | 66 | logo: /media/ext/foo.png # Logo, e.g. of the music service 67 | 68 | images: # List of images of the extension in use 69 | - /media/ext/foo.jpg 70 | 71 | service: FooBar # Name of the upstream service if any. 72 | 73 | oauth: # OAuth integration for services that require tokens: 74 | endpoint: https://example.com # Redirection endpoint to start OAuth flow 75 | origin: https://example.org # Origin of callback page at end of OAuth flow 76 | # Defaults to endpoint's origin if not set 77 | button: # Styling for auth button 78 | style: background: ... # Inline CSS to apply to button. 79 | logo: 80 | url: # URL to logo to use 81 | style: # Inline CSS to apply to logo. 82 | config: # One or more config sections to fill with data 83 | section_name: # Name of the config section 84 | - config_field # Config field name 85 | note: Extra markdown info... # Optional text adding more info 86 | ``` 87 | 88 | ### OAuth authentication 89 | 90 | The extension registry has support for integrating OAuth for service 91 | integration. This works by opening a pop-up targeted at the configured 92 | endpoint, during the flow we try polling with `postMessage` targeted at the 93 | callback origin. Once the flow is complete, and your callback page loads it 94 | should install an event listener that will reply to our polling. Once our code 95 | has the data we close the pop-up for you. 96 | 97 | ``` javascript 98 | const data = { 99 | auth_token: ..., 100 | state: ..., 101 | error: ..., 102 | error_description: ..., 103 | }; 104 | window.addEventListener('message', event => { 105 | if (event.origin === 'https://mopidy.com') { 106 | event.source.postMessage(data, event.origin); 107 | } 108 | }); 109 | ``` 110 | 111 | Note that the field names in the data should be mapped to the expected config 112 | field names. E.g. mapping `access_token` to `auth_token`. The `error` field is 113 | an error code, and `error_description` a human friendly version of the same 114 | error. `state` is there to pass back any initial state we might have sent to 115 | the endpoint. 116 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | safe: true 2 | permalink: pretty 3 | excerpt_separator: "" 4 | 5 | title: Mopidy 6 | description: The extensible music server 7 | 8 | plugins: 9 | - jekyll-avatar 10 | - jekyll-feed 11 | - jekyll-seo-tag 12 | - jekyll-sitemap 13 | 14 | collections: 15 | ext: 16 | permalink: /ext/:title/ 17 | output: true 18 | posts: 19 | permalink: /blog/:year/:month/:day/:title/ 20 | output: true 21 | 22 | defaults: 23 | - scope: 24 | path: "" 25 | type: pages 26 | values: 27 | layout: default 28 | image: /media/images/hannah-troupe-wL_w5t_OKtI-unsplash-1900x1200.jpg 29 | - scope: 30 | path: "" 31 | type: posts 32 | values: 33 | layout: post 34 | - scope: 35 | path: "" 36 | type: ext 37 | values: 38 | layout: ext 39 | -------------------------------------------------------------------------------- /_data/authors.yml: -------------------------------------------------------------------------------- 1 | adamcik: 2 | name: Thomas Adamcik 3 | github: adamcik 4 | 5 | jodal: 6 | name: Stein Magnus Jodal 7 | github: jodal 8 | 9 | kingosticks: 10 | name: Nick Steel 11 | github: kingosticks 12 | -------------------------------------------------------------------------------- /_ext/alsamixer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-ALSAMixer 3 | type: mixer 4 | dev: 5 | github: mopidy/mopidy-alsamixer 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-ALSAMixer 10 | apt-debian: mopidy-alsamixer 11 | apt-mopidy: mopidy-alsamixer 12 | arch-aur: mopidy-alsamixer 13 | --- 14 | 15 | Extension for controlling volume on a Linux system using 16 | [ALSA](https://www.alsa-project.org/). 17 | -------------------------------------------------------------------------------- /_ext/autoplay.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Autoplay 3 | type: frontend 4 | dev: 5 | github: sphh/mopidy-autoplay 6 | dist: 7 | pypi: Mopidy-Autoplay 8 | --- 9 | 10 | Mopidy extension to automatically pick up where you left off and start playing 11 | the last track from the position before Mopidy was shut down. It also restores 12 | the tracklist options "Consume", "Random", "Repeat" and "Single". It also 13 | remembers the volume and if Mopidy was muted. 14 | 15 | The exact behaviour is configurable, e.g. it is possible to force Mopidy to 16 | play a certain track or to start always unmuted. 17 | -------------------------------------------------------------------------------- /_ext/bandcamp.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Bandcamp 3 | type: backend 4 | dev: 5 | github: impliedchaos/mopidy-bandcamp 6 | codecov: true 7 | dist: 8 | pypi: Mopidy-Bandcamp 9 | logo: /media/ext/bandcamp.png 10 | --- 11 | 12 | A backend for searching, browsing, and playing the free 128kbps MP3 streams from 13 | [bandcamp](https://www.bandcamp.com/). 14 | -------------------------------------------------------------------------------- /_ext/beets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Beets 3 | type: backend 4 | dev: 5 | github: mopidy/mopidy-beets 6 | travisci: true 7 | coveralls: true 8 | dist: 9 | pypi: Mopidy-Beets 10 | apt-debian: mopidy-beets 11 | apt-mopidy: mopidy-beets 12 | arch-aur: mopidy-beets 13 | homebrew: 14 | tap: mopidy/mopidy 15 | formula: mopidy-beets 16 | --- 17 | 18 | A backend for playing music from your [Beets](https://beets.io/) 19 | music library, through Beets' web extension. 20 | -------------------------------------------------------------------------------- /_ext/dleyna.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-dLeyna 3 | type: backend 4 | dev: 5 | github: tkem/mopidy-dleyna 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-dLeyna 10 | apt-debian: mopidy-dleyna 11 | apt-mopidy: mopidy-dleyna 12 | --- 13 | 14 | A backend that lets you play music from 15 | [DLNA](https://www.dlna.org/) Digital Media Servers using the 16 | [dLeyna](https://01.org/dleyna) D-Bus interface. 17 | 18 | This extension lets you browse, search, and stream music from your NAS, PC, 19 | or any other device running a UPnP/DLNA compliant media server. Compatible 20 | devices are discovered automatically on your local network, so there is no 21 | configuration needed. 22 | -------------------------------------------------------------------------------- /_ext/file.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-File 3 | type: backend 4 | dev: 5 | github: mopidy/mopidy 6 | dist: 7 | bundled: true 8 | --- 9 | 10 | Backend for browsing a file hierarchy with media file. 11 | This backend does not support search. 12 | This backend is bundled with Mopidy. 13 | -------------------------------------------------------------------------------- /_ext/funkwhale.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Funkwhale 3 | type: backend 4 | dev: 5 | gitlab: https://dev.funkwhale.audio/funkwhale/mopidy/ 6 | dist: 7 | pypi: mopidy-funkwhale 8 | --- 9 | 10 | A backend for playing music from a 11 | [Funkwhale Server](https://funkwhale.audio/) library. 12 | -------------------------------------------------------------------------------- /_ext/headless.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Headless 3 | type: frontend 4 | dev: 5 | github: avanc/mopidy-headless 6 | travisci: false 7 | coveralls: false 8 | dist: 9 | pypi: Mopidy-Headless 10 | arch-aur: mopidy-headless 11 | --- 12 | 13 | Frontend control volume and playlists just with scroll devices like mouse-wheel or dedicated [rotary encoders](https://github.com/avanc/rotary-encoder). 14 | -------------------------------------------------------------------------------- /_ext/http.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-HTTP 3 | type: frontend 4 | dev: 5 | github: mopidy/mopidy 6 | dist: 7 | bundled: true 8 | --- 9 | 10 | Frontend that lets you control Mopidy through HTTP and WebSockets, 11 | for example from a web client. 12 | This frontend is bundled with Mopidy. 13 | -------------------------------------------------------------------------------- /_ext/internetarchive.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-InternetArchive 3 | type: backend 4 | dev: 5 | github: tkem/mopidy-internetarchive 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-InternetArchive 10 | apt-debian: mopidy-internetarchive 11 | apt-mopidy: mopidy-internetarchive 12 | arch-aur: mopidy-internetarchive 13 | homebrew: 14 | tap: mopidy/mopidy 15 | formula: mopidy-internetarchive 16 | --- 17 | 18 | Backend for playing music and audio from the 19 | [Internet Archive](https://archive.org/). 20 | -------------------------------------------------------------------------------- /_ext/iris.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Iris 3 | type: web 4 | dev: 5 | github: jaedb/iris 6 | dist: 7 | pypi: Mopidy-Iris 8 | arch-aur: mopidy-iris 9 | images: 10 | - /media/ext/iris.jpg 11 | --- 12 | 13 | A comprehensive and mobile-friendly client that presents your library and 14 | extensions in a user-friendly and intuitive interface. 15 | Built using React and Redux. 16 | -------------------------------------------------------------------------------- /_ext/jamendo.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Jamendo 3 | service: Jamendo 4 | logo: /media/ext/jamendo.jpg 5 | type: backend 6 | dev: 7 | github: jonathanhacker/mopidy-jamendo 8 | dist: 9 | pypi: Mopidy-Jamendo 10 | --- 11 | 12 | A backend for playing music from the 13 | [Jamendo](https://www.jamendo.com/start) service. 14 | -------------------------------------------------------------------------------- /_ext/jellyfin.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Jellyfin 3 | logo: /media/ext/jellyfin.png 4 | type: backend 5 | dev: 6 | github: jellyfin/mopidy-jellyfin 7 | dist: 8 | pypi: Mopidy-Jellyfin 9 | arch-aur: mopidy-jellyfin 10 | --- 11 | 12 | A backend for playing audio files from [Jellyfin](https://jellyfin.org/), a fully open source and self-hosted media server. 13 | -------------------------------------------------------------------------------- /_ext/listenbrainz.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Listenbrainz 3 | type: frontend 4 | dev: 5 | github: suaviloquence/mopidy-listenbrainz 6 | dist: 7 | pypi: Mopidy-Listenbrainz 8 | logo: /media/ext/listenbrainz.svg 9 | --- 10 | 11 | Extension for recording song listens to [ListenBrainz](https://listenbrainz.org), a libre alternative to 12 | Last.fm. It also provides ListenBrainz-generated recommendation playlists to Mopidy. 13 | -------------------------------------------------------------------------------- /_ext/local.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Local 3 | type: backend 4 | dev: 5 | github: mopidy/mopidy-local 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-Local 10 | apt-debian: mopidy-local 11 | apt-mopidy: mopidy-local 12 | arch-aur: mopidy-local 13 | homebrew: 14 | tap: mopidy/mopidy 15 | formula: mopidy-local 16 | --- 17 | 18 | Extension for playing music from your local music archive. 19 | 20 | In contrast to [Mopidy-File](/ext/file), Mopidy-Local builds an index of your 21 | archive's metadata ahead of time, and can thus provide additional features 22 | like search. 23 | 24 | The music metadata is stored in a SQLite database. This lets you browse your 25 | music collection by album, artist, composer and performer, and provides 26 | full-text search capabilities based on SQLite's FTS modules. It also notices 27 | updates via `mopidy local scan` while Mopidy is running, so you can scan 28 | your media library periodically, for example from a cron job. 29 | 30 | ## History 31 | 32 | This extension is the result of the merging of three old extensions: 33 | 34 | - Mopidy-Local, which before Mopidy 3 used to be bundled with Mopidy itself. 35 | - Mopidy-Local-SQLite, which was an alternative to the old default JSON file storage backend. 36 | - Mopidy-Local-Images, which provides album art embedded in local files to web clients. 37 | -------------------------------------------------------------------------------- /_ext/mixcloud.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Mixcloud 3 | type: backend 4 | dev: 5 | github: unusualcomputers/unusualcomputers/tree/master/code/mopidy/mopidymixcloud 6 | dist: 7 | pypi: Mopidy-Mixcloud 8 | 9 | --- 10 | 11 | A backend for playing and browsing feeds from [Mixcloud](https://mixcloud.com). 12 | -------------------------------------------------------------------------------- /_ext/mobile.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Mobile 3 | type: web 4 | dev: 5 | github: tkem/mopidy-mobile 6 | travisci: true 7 | coveralls: true 8 | dist: 9 | pypi: Mopidy-Mobile 10 | images: 11 | - /media/ext/mobile.jpg 12 | --- 13 | 14 | A simple, easy to use remote that lets you fully control a Mopidy music server 15 | from your mobile device. It is available as a Web client extension and a hybrid 16 | app for Android version 4.4 and later. 17 | -------------------------------------------------------------------------------- /_ext/mopster.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Mopster 3 | type: web 4 | dev: 5 | github: cowbell/mopster 6 | images: 7 | - /media/ext/mopster.png 8 | --- 9 | 10 | Simple web client which does not require local installation. Can be used from hosted web page at [Mopster](http://mopster.urizen.pl). 11 | 12 | Built using Ember.js. 13 | -------------------------------------------------------------------------------- /_ext/mowecl.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Mowecl 3 | type: web 4 | dev: 5 | github: sapristi/mopidy-mowecl 6 | dist: 7 | pypi: Mopidy-Mowecl 8 | images: 9 | - /media/ext/mowecl.png 10 | --- 11 | 12 | Clean and ergonomic web client for Mopidy. The library, playlists, etc are accessible from a single tree view. 13 | Not suitable for small screens. 14 | -------------------------------------------------------------------------------- /_ext/mpd.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-MPD 3 | type: frontend 4 | dev: 5 | github: mopidy/mopidy-mpd 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-MPD 10 | apt-debian: mopidy-mpd 11 | apt-mopidy: mopidy-mpd 12 | arch-aur: mopidy-mpd 13 | fedora: mopidy-mpd 14 | homebrew: 15 | tap: mopidy/mopidy 16 | formula: mopidy-mpd 17 | --- 18 | 19 | Frontend that provides a full MPD server implementation 20 | to make Mopidy available from MPD clients. 21 | -------------------------------------------------------------------------------- /_ext/mpris.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-MPRIS 3 | type: frontend 4 | dev: 5 | github: mopidy/mopidy-mpris 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-MPRIS 10 | apt-debian: mopidy-mpris 11 | apt-mopidy: mopidy-mpris 12 | arch-aur: mopidy-mpris 13 | --- 14 | 15 | Frontend for controlling Mopidy through the 16 | [MPRIS](https://www.freedesktop.org/wiki/Specifications/mpris-spec/) 17 | D-Bus interface, for example using the Ubuntu Sound Menu. 18 | -------------------------------------------------------------------------------- /_ext/muse.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Muse 3 | logo: /media/ext/muse-logo.png 4 | type: web 5 | dev: 6 | github: cristianpb/muse 7 | dist: 8 | pypi: Mopidy-Muse 9 | images: 10 | - /media/ext/muse.jpg 11 | --- 12 | 13 | A light web client with support for Snapcast volume control, track search and 14 | playlists edition. Built with Svelte and Sapper. 15 | 16 | For more information see [this post](https://cristianpb.github.io/blog/mopidy-muse). 17 | -------------------------------------------------------------------------------- /_ext/musicbox-webclient.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-MusicBox-Webclient 3 | type: web 4 | dev: 5 | github: pimusicbox/mopidy-musicbox-webclient 6 | dist: 7 | pypi: Mopidy-MusicBox-Webclient 8 | arch-aur: mopidy-musicbox 9 | images: 10 | - /media/ext/musicbox-webclient.jpg 11 | --- 12 | 13 | The first web client for Mopidy, made with jQuery Mobile. 14 | -------------------------------------------------------------------------------- /_ext/nad.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-NAD 3 | type: mixer 4 | dev: 5 | github: mopidy/mopidy-nad 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-NAD 10 | --- 11 | 12 | Mixer for controlling volume using an [NAD](https://nadelectronics.com/) amplifier. 13 | Developed and tested with a NAD C355BEE. 14 | -------------------------------------------------------------------------------- /_ext/orfradio.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-ORFRadio 3 | type: backend 4 | dev: 5 | github: mopidy/mopidy-orfradio 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-ORFRadio 10 | --- 11 | 12 | Extension to access the [Austrian ORF radio stations](https://radiothek.orf.at/). It provides access to the live streams and the 7 day archive. 13 | -------------------------------------------------------------------------------- /_ext/pandora.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Pandora 3 | type: backend 4 | dev: 5 | github: mopidy/mopidy-pandora 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-Pandora 10 | arch-aur: mopidy-pandora 11 | --- 12 | 13 | A backend for playing music from the 14 | [Pandora](https://www.pandora.com/) music streaming and radio service. 15 | -------------------------------------------------------------------------------- /_ext/party.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Party 3 | type: web 4 | dev: 5 | github: Lesterpig/mopidy-party 6 | dist: 7 | pypi: Mopidy-Party 8 | images: 9 | - /media/ext/party.jpg 10 | --- 11 | 12 | Minimal web client designed for collaborative music management during parties. 13 | -------------------------------------------------------------------------------- /_ext/pibox.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Pibox 3 | type: web 4 | logo: /media/ext/pibox-logo.png 5 | dev: 6 | github: gbannerman/mopidy-pibox 7 | dist: 8 | pypi: Mopidy-Pibox 9 | images: 10 | - /media/ext/pibox.png 11 | --- 12 | 13 | A web client that allows multiple users to search for and queue songs as a group, via a clean and simple interface. Great for parties! 🥳 14 | 15 | - Search for and queue songs using any Mopidy backend 16 | - Vote to skip queued tracks 17 | - Plays from a predefined playlist if no tracks are queued 18 | - Prevents tracks from being queued again after they have been played or skipped 19 | - Admins controls to pause/resume playback or skip current track 20 | - Display view for showing on a TV or monitor 21 | - Can be used offline without an internet connection using Mopidy-Local 22 | -------------------------------------------------------------------------------- /_ext/pidi.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-PiDi 3 | type: frontend 4 | dev: 5 | github: pimoroni/mopidy-pidi 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-PiDi 10 | --- 11 | 12 | Frontend for displaying track info and album art using PiDi display plugins. 13 | 14 | PiDi display plugins includes support for the 240x240 pixels ST7789 display, 15 | which is sold both as 16 | [a standalone display](https://www.adafruit.com/product/3787) and 17 | as part Pimoroni's 18 | [Pirate Audio](https://shop.pimoroni.com/collections/pirate-audio) DACs. 19 | -------------------------------------------------------------------------------- /_ext/podcast-itunes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Podcast-iTunes 3 | type: backend 4 | dev: 5 | github: tkem/mopidy-podcast-itunes 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-Podcast-iTunes 10 | apt-debian: mopidy-podcast-itunes 11 | apt-mopidy: mopidy-podcast-itunes 12 | arch-aur: mopidy-podcast-itunes 13 | homebrew: 14 | tap: mopidy/mopidy 15 | formula: mopidy-podcast-itunes 16 | --- 17 | 18 | This is an extension to the [Mopidy-Podcast](/ext/podcast/) backend that lets 19 | you search and browse podcasts from the Apple iTunes Store. 20 | -------------------------------------------------------------------------------- /_ext/podcast.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Podcast 3 | type: backend 4 | dev: 5 | github: tkem/mopidy-podcast 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-Podcast 10 | apt-debian: mopidy-podcast 11 | apt-mopidy: mopidy-podcast 12 | arch-aur: mopidy-podcast 13 | homebrew: 14 | tap: mopidy/mopidy 15 | formula: mopidy-podcast 16 | --- 17 | 18 | Extension for browsing RSS feeds of podcasts and stream the episodes. 19 | 20 | This extension lets you browse podcasts distributed as RSS feeds and play 21 | individual episodes in a variety of audio formats. Podcasts are mapped to 22 | albums, while podcast episodes are shown as tracks in Mopidy, with metadata 23 | converted to Mopidy's native data model where applicable. OPML 2.0 24 | subscription lists and directories are also supported for multi-level 25 | browsing. 26 | -------------------------------------------------------------------------------- /_ext/radionet.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-RadioNet 3 | type: backend 4 | dev: 5 | github: plintx/mopidy-radionet 6 | travisci: true 7 | coveralls: true 8 | dist: 9 | pypi: Mopidy-RadioNet 10 | --- 11 | 12 | A backend for playing radio channels from the [radio.net](https://radio.net/). 13 | -------------------------------------------------------------------------------- /_ext/raspberry-gpio.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Raspberry-GPIO 3 | type: frontend 4 | dev: 5 | github: pimoroni/mopidy-raspberry-gpio 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-Raspberry-GPIO 10 | --- 11 | 12 | Frontend for controlling Mopidy from GPIO signals on a Raspberry Pi. 13 | 14 | This plugin is used by Pimoroni's 15 | [Pirate Audio](https://shop.pimoroni.com/collections/pirate-audio) DACs 16 | to play/pause, skip track, and adjust volume. 17 | -------------------------------------------------------------------------------- /_ext/scrobbler.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Scrobbler 3 | type: frontend 4 | dev: 5 | github: mopidy/mopidy-scrobbler 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-Scrobbler 10 | apt-debian: mopidy-scrobbler 11 | apt-mopidy: mopidy-scrobbler 12 | arch-aur: mopidy-scrobbler 13 | homebrew: 14 | tap: mopidy/mopidy 15 | formula: mopidy-scrobbler 16 | --- 17 | 18 | Extension for scrobbling played tracks to [Last.fm](https://www.last.fm/). 19 | -------------------------------------------------------------------------------- /_ext/softwaremixer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-SoftwareMixer 3 | type: mixer 4 | dev: 5 | github: mopidy/mopidy 6 | dist: 7 | bundled: true 8 | --- 9 | 10 | Mixer for volume and mute control in software. 11 | This mixer is bundled with Mopidy. 12 | -------------------------------------------------------------------------------- /_ext/somafm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-SomaFM 3 | type: backend 4 | dev: 5 | github: AlexandrePTJ/mopidy-somafm 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-SomaFM 10 | apt-debian: mopidy-somafm 11 | apt-mopidy: mopidy-somafm 12 | arch-aur: mopidy-somafm 13 | homebrew: 14 | tap: mopidy/mopidy 15 | formula: mopidy-somafm 16 | --- 17 | 18 | A backend for playing music from the 19 | [SomaFM](https://somafm.com/) radio channels. 20 | -------------------------------------------------------------------------------- /_ext/soundcloud.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-SoundCloud 3 | service: SoundCloud 4 | logo: /media/ext/soundcloud.png 5 | type: backend 6 | dev: 7 | github: mopidy/mopidy-soundcloud 8 | circleci: true 9 | codecov: true 10 | dist: 11 | pypi: Mopidy-SoundCloud 12 | apt-debian: mopidy-soundcloud 13 | apt-mopidy: mopidy-soundcloud 14 | arch-aur: mopidy-soundcloud 15 | homebrew: 16 | tap: mopidy/mopidy 17 | formula: mopidy-soundcloud 18 | oauth: 19 | button: 20 | style: "background-color: #FF3300; color: #FFF" 21 | logo: 22 | url: https://unpkg.com/simple-icons@latest/icons/soundcloud.svg 23 | style: "filter: invert(1)" 24 | endpoint: https://secure.soundcloud.com/connect?client_id=93e33e327fd8a9b77becd179652272e2&scope=non-expiring&response_type=code_and_token&redirect_uri=https://www.mopidy.com/soundcloud_callback 25 | origin: https://mopidy.com 26 | config: 27 | soundcloud: 28 | - auth_token 29 | --- 30 | 31 | A backend for playing music from the 32 | [SoundCloud](https://soundcloud.com/) service. 33 | -------------------------------------------------------------------------------- /_ext/spotify.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Spotify 3 | service: Spotify 4 | logo: /media/ext/spotify.png 5 | type: backend 6 | dev: 7 | github: mopidy/mopidy-spotify 8 | circleci: true 9 | codecov: true 10 | oauth: 11 | button: 12 | style: "background-color: #1ED760; color: #FFF" 13 | logo: 14 | url: https://unpkg.com/simple-icons@latest/icons/spotify.svg 15 | style: "filter: invert(1); width: 1.2rem" 16 | endpoint: https://auth.mopidy.com/spotify/ 17 | config: 18 | spotify: 19 | - client_id 20 | - client_secret 21 | --- 22 | 23 | Extension for playing music from the [Spotify](https://spotify.com/) music 24 | streaming service. Mopidy-Spotify is currently only available from GitHub. 25 | -------------------------------------------------------------------------------- /_ext/stream.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Stream 3 | type: backend 4 | dev: 5 | github: mopidy/mopidy 6 | dist: 7 | bundled: true 8 | --- 9 | 10 | Backend for playing streaming music. 11 | This backend is bundled with Mopidy. 12 | -------------------------------------------------------------------------------- /_ext/subidy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Subidy 3 | type: backend 4 | dev: 5 | github: Prior99/mopidy-subidy 6 | circleci: true 7 | codecov: true 8 | dist: 9 | arch-aur: mopidy-subidy 10 | pypi: Mopidy-Subidy 11 | --- 12 | 13 | A backend for playing music from a 14 | [Subsonic-compatible Music Server](http://www.subsonic.org/pages/api.jsp). 15 | Software compatible with the Subsonic API includes: 16 | 17 | - [Subsonic](http://www.subsonic.org) 18 | - [Airsonic](https://github.com/airsonic/airsonic) 19 | - [Navidrome](https://github.com/deluan/navidrome) 20 | - [Funkwhale](https://funkwhale.audio) (also see Mopidy-Funkwhale) 21 | -------------------------------------------------------------------------------- /_ext/tidal.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-Tidal 3 | service: Tidal 4 | logo: /media/ext/tidal.png 5 | type: backend 6 | dev: 7 | github: tehkillerbee/mopidy-tidal 8 | codecov: true 9 | dist: 10 | pypi: Mopidy-Tidal 11 | arch-aur: python-mopidy-tidal 12 | --- 13 | 14 | Extension for playing music from the 15 | [TIDAL](https://tidal.com/) music streaming service. -------------------------------------------------------------------------------- /_ext/tunein.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-TuneIn 3 | logo: /media/ext/tunein.png 4 | type: backend 5 | dev: 6 | github: kingosticks/mopidy-tunein 7 | circleci: true 8 | codecov: true 9 | dist: 10 | pypi: Mopidy-TuneIn 11 | apt-debian: mopidy-tunein 12 | apt-mopidy: mopidy-tunein 13 | arch-aur: mopidy-tunein 14 | homebrew: 15 | tap: mopidy/mopidy 16 | formula: mopidy-tunein 17 | --- 18 | 19 | A backend for playing music from the 20 | [TuneIn](https://tunein.com/) online radio service. 21 | -------------------------------------------------------------------------------- /_ext/webm3u.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-WebM3U 3 | type: backend 4 | dev: 5 | github: mgoltzsche/mopidy-webm3u 6 | dist: 7 | pypi: Mopidy-WebM3U 8 | --- 9 | 10 | A backend for loading M3U playlists from an HTTP server. 11 | For example it allows you to browse and listen to the playlists within your [Beets](https://beets.io/) music library, through Beets' [webm3u](https://github.com/mgoltzsche/beets-webm3u) plugin. 12 | -------------------------------------------------------------------------------- /_ext/youtube.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-YouTube 3 | type: backend 4 | dev: 5 | github: natumbri/mopidy-youtube 6 | circleci: true 7 | codecov: true 8 | dist: 9 | pypi: Mopidy-YouTube 10 | arch-aur: mopidy-youtube 11 | --- 12 | 13 | A backend for playing music from the 14 | [YouTube](https://www.youtube.com/) service. 15 | -------------------------------------------------------------------------------- /_ext/ytmusic.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-YTMusic 3 | service: YouTube Music 4 | type: backend 5 | dev: 6 | github: OzymandiasTheGreat/mopidy-ytmusic 7 | dist: 8 | pypi: Mopidy-YTMusic 9 | logo: /media/ext/youtubemusic.png 10 | --- 11 | 12 | A backend for playing music from Google's streaming music service 13 | named [YouTube Music](https://music.youtube.com/). 14 | -------------------------------------------------------------------------------- /_includes/blog-authors.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Contributors

4 | 5 | {% for author_name in post.authors %} 6 | 7 | {% assign author = site.data.authors[author_name] %} 8 | 9 |
10 |
11 |

12 | {% avatar user=author.github size=64 %} 13 |

14 |
15 |
16 |

{{ author_name }}

17 |

{{ author.name }}

18 | {% if author.github %} 19 | 20 | 21 | 22 | 23 | 24 | {% endif %} 25 |
26 |
27 | 28 | {% endfor %} 29 | 30 |
31 | -------------------------------------------------------------------------------- /_includes/ext-buttons.html: -------------------------------------------------------------------------------- 1 |
2 | {% if ext.dev.github %} 3 | 4 | 5 |  {{ ext.dev.github }} 6 | 7 | {% endif %} 8 | {% if ext.dist.pypi %} 9 | 10 | 11 |  {{ ext.dist.pypi }} 12 | 13 | {% endif %} 14 |
15 | -------------------------------------------------------------------------------- /_includes/ext-footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |

Updating the extension registry

5 | 6 |

7 | This extension registry is a community effort, 8 | and will never be complete without your help. 9 | To add or update an extension, edit the 10 | source files 11 | using the existing extensions as inspiration, 12 | then submit a pull request to the 13 | mopidy/website 14 | repo at GitHub. 15 |

16 | 17 |
18 |
19 | -------------------------------------------------------------------------------- /_includes/ext-stats.html: -------------------------------------------------------------------------------- 1 |
2 | {% if ext.logo %} 3 |
4 |
5 |
6 | 7 |
8 |
9 |
10 | {% endif %} 11 | 12 |
13 | 14 | {% if ext.dev.github or ext.dist.pypi %} 15 |
Popularity
16 |

17 | {% if ext.dev.github %} 18 | 19 | GitHub stars 23 | 24 | {% endif %} 25 | {% if ext.dist.pypi %} 26 | 27 | PyPI - Downloads 31 | 32 | {% endif %} 33 |

34 | {% endif %} 35 | 36 | {% if ext.dist.pypi %} 37 |
PyPI
38 |

39 | 40 | PyPI - Package version 44 | 45 | 46 | PyPI - Python support 50 | 51 |

52 | {% endif %} 53 | 54 | {% if ext.dist.pypi %} 55 |
License
56 |

57 | 58 | PyPI - License 62 | 63 |

64 | {% endif %} 65 | 66 | {% if ext.dev.github %} 67 |
Project stats
68 |

69 | 70 | GitHub issues 74 | 75 | 76 | GitHub pull requests 80 | 81 |

82 | {% endif %} 83 | 84 | {% if ext.dev.circleci or ext.dev.travisci or ext.dev.codecov or ext.dev.coveralls %} 85 |
Quality metrics
86 |

87 | {% if ext.dev.circleci %} 88 | 89 | CircleCI build status 93 | 94 | {% endif %} 95 | {% if ext.dev.travisci %} 96 | 97 | CircleCI build status 101 | 102 | {% endif %} 103 | {% if ext.dev.codecov %} 104 | 105 | Codecov test coverage 109 | 110 | {% endif %} 111 | {% if ext.dev.coveralls %} 112 | 113 | Coveralls test coverage 117 | 118 | {% endif %} 119 |

120 | {% endif %} 121 | 122 |
123 |
124 | -------------------------------------------------------------------------------- /_includes/ext-type-list.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /_layouts/base.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ page.title }} 8 | 9 | 10 | 11 | 12 | 13 | {% seo title=false %} 14 | {% feed_meta %} 15 | 16 | 17 | 23 | 24 | 25 | 26 | {{ content }} 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 | 5 | 76 | 77 | {{ content }} 78 | 79 | 125 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {% assign post = page %} 6 | 7 |
8 |
9 | 10 | 17 | 18 |
19 | 20 |

21 | {{ post.title }} 22 |

23 | 24 |

25 | 28 |

29 | 30 |
31 |
32 | 33 |
34 | {{ content }} 35 |
36 | 37 |
38 |
39 | 40 | {% include blog-authors.html %} 41 | 42 |
43 |
44 | 45 |
46 | 47 |
48 |
49 | 50 | {% if post.discourse-topic-id %} 51 |
52 |
53 | 54 |

Comments

55 | 56 |
57 |
58 | 59 |
60 | 73 | 74 |
75 |
76 | 77 |
78 |
79 | {% endif %} 80 | -------------------------------------------------------------------------------- /_posts/2013-01-09-mopidy-in-the-browser.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bringing the Mopidy music server to the browser 3 | canonical_url: https://jodal.no/2017/08/26/mopidy-in-the-browser/ 4 | tags: 5 | - api 6 | - mopidy 7 | - python 8 | - javascript 9 | - web 10 | - websocket 11 | authors: 12 | - jodal 13 | --- 14 | 15 | [Mopidy](https://mopidy.com/) is a music server written in 16 | Python. It plays music from various sources, including local disk and Spotify. 17 | Mopidy can be remote-controlled by, among others, MPD clients. 19 | 20 | In Mopidy 0.10, released in the middle of December, we added an HTTP frontend. 21 | The HTTP frontend takes Mopidy's full core API and makes it available from 22 | JavaScript in the browser. This means that you now can make your own web 23 | clients for Mopidy in JavaScript, and Wouter van Wijk has already started on 24 | [his client](https://github.com/pimusicbox/mopidy-musicbox-webclient) (*updated 25 | link*). 26 | 27 | I'd like to write a bit about how we made the HTTP client. 28 | 29 | 30 | 31 | From the start, I was quite clear on having enough work to do on the server-side 32 | of Mopidy. Thus, making my own client to test out REST APIs and to make 33 | sure the APIs we exposed were usable was mostly out of the question. Also, 34 | making a REST API would require us to spend huge amounts of time on figuring 35 | out how to best remap our procedural "core API" to REST resources. When the 36 | remapping would be complete, if ever, we would be stuck with the maintenance of 37 | yet another API on top of the core API, with all the associated mismatches and 38 | hacks required to match them up. We got enough of them in the MPD frontend. 39 | 40 | Wouter had experimented a bit himself with making an HTTP frontend and 41 | suggested that we should go for an RPC model. I was reluctant at first. RPC reminds me of SOAP, the 43 | nineties, and other similar ideas that I don't exactly regard as the state of 44 | the art. 45 | 46 | After some thought, I figured that with an RPC API, I could probably make the 47 | entire API on the server-side dynamically. In other words, I could get it done 48 | in a lot less time than a REST API, and it would maintain itself. At least, it 49 | would maintain itself to any degree such a thing is possible. If we added a new 50 | method to the core API, it would immediately be available through the HTTP RPC 51 | API. This would of course also mean that if we changed anything in the existing 52 | core API, we'd break any web client that uses that part of the API. After some 53 | discussion, we decided that we were OK with this drawback. After all, we intend 54 | the core API to become quite stable with time, where time approximately equals 55 | the release of v1.0. Also, the initial development work and future maintenance 56 | work associated with making an RPC API were within our reach, without 57 | distracting us for too long from work on the core code, the MPD and MPRIS 58 | frontends, and the local storage and Spotify backends. You see, we already got 59 | a healthy list of moving parts to keep oiled and working. 60 | 61 | The part that got me excited on an RPC API (of all things to get 62 | excited about) was the insight that if I added some introspection support to 63 | the API, I could make a JavaScript library to rebuild the entire API in the 64 | browser. So, instead of just providing a web service endpoint URL to potential 65 | client providers, we could offer them a complete API in the browser. Ready for 66 | development. Queue your first music track in a few minutes of development. 67 | That's a good value proposition for aspiring client developers if you ask me. 68 | 69 | So, I made a new HTTP frontend. It started a CherryPy web server. Then it 70 | plugged ws4py into CherryPy, and we got a working WebSocket. Then I made my 71 | custom RPC API, using JSON as the transport format. I sent messages from 72 | Chrome's console, and music started playing. It worked. It wasn't tested, but I 73 | was happy so far. 74 | 75 | Then Thomas, my main co-developer, wise as always, pasted the URL to the 76 | [JSON-RPC 2.0 specification](http://www.jsonrpc.org/specification). Humph, I 77 | thought, not leaving it much chance. I read through the rather short spec and 78 | concluded that it was really close to what I'd reinvented, minus support for 79 | calls with both positional and named arguments at the same time. 80 | 81 | Cutting it short, I spent the next day or so implementing JSON-RPC 2.0, this 82 | time with tests. I plugged it into the HTTP frontend, and it worked. 83 | 84 | Now you might say: Why didn't you use one of the 25 or so existing JSON-RPC 85 | implementations on PyPI. Because there are 25 or so. How am I to review them in 86 | less time than it takes to implement the perfect one for my needs? Many of the 87 | alternatives provide examples of how to execute a Python file, and then 88 | magically a web server will be running. That's not a selling point to me since 89 | JSON-RPC got nothing to do with webservers or the message transport for that 90 | matter. JSON-RPC is simply a mapping between a JSON format and method calls. It 91 | should be implemented by some function/object that accepts JSON, makes the 92 | required Python calls, and then returns the return values as JSON again. That's 93 | it. No web server. Maybe some API introspection. 94 | 95 | Digression aside, I'm considering extracting and releasing our JSON-RPC 96 | adapter. Then it'll be N+1 [competing standards](https://xkcd.com/927/), eh, I 97 | mean, implementations. 98 | 99 | Next up was the JavaScript library. The main discussion here was actually where 100 | to place the code in our pure-Python repo. Bikeshedding of easily reversible 101 | decisions continues to be the easiest discussions to have. We ended on `js/` in 102 | the root of the repo. How imaginative of us. 103 | 104 | The first thing in any new JavaScript project is, of course, to set up 105 | [Buster.JS](http://www.busterjs.org/) for testing. I also tried out the [Grunt 106 | build tool](https://gruntjs.com/) for the first time. (My friend Pål recently 107 | wrote an [introduction to Grunt](https://ruudud.github.io/2012/12/22/grunt/) 108 | featured at HN and in JavaScript Weekly.) Buster.JS in combination with Grunt 109 | and [PhantomJS](http://phantomjs.org/) was a delight. If you simply run 110 | `grunt watch` and then modify a source file, your code is linted and tested 111 | in a headless browser in second or so. This makes JavaScript development for 112 | the browser feel like server-side development. If this sounds interesting, 113 | check out [our JavaScript project 114 | setup](https://github.com/mopidy/mopidy.js) (*updated link*). 115 | 116 | TODO 117 | 118 | - Mopidy.js usage examples 119 | - Invitation to develop clients 120 | 121 | --- 122 | 123 | ### Note from August 2017 124 | 125 | This is a blog post draft that was originally written in January 2013, 126 | left unattended for 1689 days, and rediscovered and published unedited in 127 | August 2017. 128 | 129 | During the five years since Mopidy entered the browser with its HTTP JSON-RPC 130 | API and the Mopidy.js JavaScript library, many successful Mopidy web 131 | clients have been built on top of this foundation. The APIs themselves have 132 | survived the test of time and have required minimal maintenance, just as I 133 | hoped when implementing the APIs back in November 2012. 134 | 135 | To quickly address the above TODOs from January 2013: Usage examples can 136 | be found in the [Mopidy docs](https://docs.mopidy.com/en/latest/api/js/), and 137 | an invitation to develop clients wasn't needed, as [a 138 | dozen clients](https://docs.mopidy.com/en/latest/ext/web/) was made without 139 | it. 140 | 141 | --- 142 | 143 | *This blog post was originally published at 144 | [jodal.no](https://jodal.no/2017/08/26/mopidy-in-the-browser/).* 145 | -------------------------------------------------------------------------------- /_posts/2014-10-28-debian-packaging.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Debian packaging of Mopidy 3 | canonical_url: https://jodal.no/2014/10/28/debian-packaging/ 4 | tags: 5 | - debian 6 | - python 7 | - mopidy 8 | authors: 9 | - jodal 10 | --- 11 | 12 | My first upload to Debian as a Debian Maintainer, Mopidy 0.19.4-3, landed in 13 | Debian testing today, well in time for the upcoming freeze. 14 | 15 | The new version adjusts the LSB facilities the sysvinit script depends on, to 16 | make sure that DNS lookups, DBus (used by Mopidy-MPRIS), and Avahi (used for 17 | Zeroconf service publishing) are available before Mopidy starts. 18 | 19 | 20 | 21 | Most importantly, maybe, the new package adds a systemd service file. The 22 | sysvinit init script included a custom action called "run", which is used to 23 | run Mopidy subcommands with the same user and configuration as the system 24 | service use. To replace this with something that can also be used on a system 25 | running systemd, a new executable called `mopidyctl` has been added. The new 26 | executable does the same: it runs Mopidy with the same user and 27 | configuration as the init system uses to start Mopidy as a system service. 28 | 29 | In short, `sudo service mopidy run config` now becomes `sudo mopidyctl config`, 30 | both on systems running sysvinit and systems running systemd. 31 | 32 | --- 33 | 34 | *This blog post was originally published at 35 | [jodal.no](https://jodal.no/2014/10/28/debian-packaging/).* 36 | -------------------------------------------------------------------------------- /_posts/2018-12-07-mopidy-mpris-2.0.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy-MPRIS 2.0 released 3 | canonical_url: https://jodal.no/2018/12/07/mopidy-mpris-2.0/ 4 | tags: 5 | - mopidy 6 | - mpris 7 | - python 8 | authors: 9 | - jodal 10 | --- 11 | 12 | I've released [Mopidy-MPRIS](https://github.com/mopidy/mopidy-mpris) 2.0, the 13 | first major update to Mopidy-MPRIS in about 3.5 years. 14 | 15 | Mopidy-MPRIS is a Mopidy extension that makes [Mopidy](https://mopidy.com/) 16 | controllable from other programs on the same machine through D-Bus. This makes 17 | it possible to control Mopidy from various widgets in GNOME/KDE/etc, as well as 18 | with keyboard media keys. 19 | 20 | 21 | 22 | This release replaces the `python-dbus` D-Bus bindings with `python-pydbus` to 23 | modernize the code base and prepare it for the move to Python 3. It also wires 24 | up a lot of events so that various UI elements are immediately updated when the 25 | server state changes. 26 | 27 | As part of the release, the 28 | [documentation](https://github.com/mopidy/mopidy-mpris/blob/master/README.rst) 29 | has been greatly extended, including a survey of some MPRIS clients and tips on 30 | how to run Mopidy-MPRIS on the system bus. Throughout the documentation, I've 31 | added calls for help wherever something isn't working perfectly and I haven't 32 | figured it out yet. Even with these rough spots, this is easily the best 33 | Mopidy-MPRIS release so far. 34 | 35 | For all the details, check out the 36 | [changelog](https://github.com/mopidy/mopidy-mpris/blob/v2.0.0/CHANGELOG.rst). 37 | 38 | --- 39 | 40 | *This blog post was originally published at 41 | [jodal.no](https://jodal.no/2018/12/07/mopidy-mpris-2.0/).* 42 | -------------------------------------------------------------------------------- /_posts/2019-12-22-mopidy-3.0.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy 3.0 released 3 | tags: 4 | - mopidy 5 | - release 6 | authors: 7 | - jodal 8 | discourse-topic-id: 3646 9 | --- 10 | 11 | The long-awaited Mopidy 3.0 is finally here, just in time for the Mopidy 12 | project's 10th anniversary on December 23rd! 13 | 14 | Mopidy 3.0 is a backward-incompatible release in a pretty significant way: 15 | Mopidy no longer runs on Python 2. 16 | 17 | 18 | 19 | **Mopidy 3.0 requires Python 3.7 or newer.** 20 | 21 | While extensions have been able to continue working without changes 22 | throughout the 1.x and 2.x series of Mopidy, this time is different: 23 | 24 | - All extensions must be updated to work on Python 3.7 and newer. 25 | 26 | - Some extensions need to replace their use of a few long-deprecated APIs 27 | that we've removed. 28 | See [the full changelog](https://docs.mopidy.com/en/latest/changelog/) 29 | for details. 30 | 31 | - Extension maintainers are also encouraged to update their project's setup to 32 | match our refreshed 33 | [extension cookiecutter](https://github.com/mopidy/cookiecutter-mopidy-ext). 34 | 35 | In parallel with the development of Mopidy 3.0, we've coordinated with a few 36 | extension maintainers and upgraded almost 20 of the most popular extensions. 37 | These will all be published shortly after the release of Mopidy 3.0. 38 | 39 | We've also built a new [extension registry](/ext/), where you can quickly track 40 | what extensions are ready for Python 3. 41 | 42 | In other news, the [Mopidy-MPD](/ext/mpd/) and [Mopidy-Local](/ext/local/) 43 | extensions have grown up and moved out to flourish as independent extension 44 | projects. After the move, Mopidy-Local merged with Mopidy-Local-SQLite and 45 | Mopidy-Local-Images, which are now both a part of the Mopidy-Local extension. 46 | 47 | For further details, 48 | please see [the changelog](https://docs.mopidy.com/en/latest/changelog/). 49 | 50 | --- 51 | 52 | _To read more about the story behind Mopidy 3.0, see our next post, 53 | [10 years of Mopidy](/blog/2019/12/23/10y-of-mopidy/)._ 54 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/base/_all.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "minireset.sass" 4 | @import "generic.sass" 5 | @import "helpers.sass" 6 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/base/generic.sass: -------------------------------------------------------------------------------- 1 | $body-background-color: $scheme-main !default 2 | $body-size: 16px !default 3 | $body-min-width: 300px !default 4 | $body-rendering: optimizeLegibility !default 5 | $body-family: $family-primary !default 6 | $body-overflow-x: hidden !default 7 | $body-overflow-y: scroll !default 8 | 9 | $body-color: $text !default 10 | $body-font-size: 1em !default 11 | $body-weight: $weight-normal !default 12 | $body-line-height: 1.5 !default 13 | 14 | $code-family: $family-code !default 15 | $code-padding: 0.25em 0.5em 0.25em !default 16 | $code-weight: normal !default 17 | $code-size: 0.875em !default 18 | 19 | $small-font-size: 0.875em !default 20 | 21 | $hr-background-color: $background !default 22 | $hr-height: 2px !default 23 | $hr-margin: 1.5rem 0 !default 24 | 25 | $strong-color: $text-strong !default 26 | $strong-weight: $weight-bold !default 27 | 28 | $pre-font-size: 0.875em !default 29 | $pre-padding: 1.25rem 1.5rem !default 30 | $pre-code-font-size: 1em !default 31 | 32 | html 33 | background-color: $body-background-color 34 | font-size: $body-size 35 | -moz-osx-font-smoothing: grayscale 36 | -webkit-font-smoothing: antialiased 37 | min-width: $body-min-width 38 | overflow-x: $body-overflow-x 39 | overflow-y: $body-overflow-y 40 | text-rendering: $body-rendering 41 | text-size-adjust: 100% 42 | 43 | article, 44 | aside, 45 | figure, 46 | footer, 47 | header, 48 | hgroup, 49 | section 50 | display: block 51 | 52 | body, 53 | button, 54 | input, 55 | select, 56 | textarea 57 | font-family: $body-family 58 | 59 | code, 60 | pre 61 | -moz-osx-font-smoothing: auto 62 | -webkit-font-smoothing: auto 63 | font-family: $code-family 64 | 65 | body 66 | color: $body-color 67 | font-size: $body-font-size 68 | font-weight: $body-weight 69 | line-height: $body-line-height 70 | 71 | // Inline 72 | 73 | a 74 | color: $link 75 | cursor: pointer 76 | text-decoration: none 77 | strong 78 | color: currentColor 79 | &:hover 80 | color: $link-hover 81 | 82 | code 83 | background-color: $code-background 84 | color: $code 85 | font-size: $code-size 86 | font-weight: $code-weight 87 | padding: $code-padding 88 | 89 | hr 90 | background-color: $hr-background-color 91 | border: none 92 | display: block 93 | height: $hr-height 94 | margin: $hr-margin 95 | 96 | img 97 | height: auto 98 | max-width: 100% 99 | 100 | input[type="checkbox"], 101 | input[type="radio"] 102 | vertical-align: baseline 103 | 104 | small 105 | font-size: $small-font-size 106 | 107 | span 108 | font-style: inherit 109 | font-weight: inherit 110 | 111 | strong 112 | color: $strong-color 113 | font-weight: $strong-weight 114 | 115 | // Block 116 | 117 | fieldset 118 | border: none 119 | 120 | pre 121 | +overflow-touch 122 | background-color: $pre-background 123 | color: $pre 124 | font-size: $pre-font-size 125 | overflow-x: auto 126 | padding: $pre-padding 127 | white-space: pre 128 | word-wrap: normal 129 | code 130 | background-color: transparent 131 | color: currentColor 132 | font-size: $pre-code-font-size 133 | padding: 0 134 | 135 | table 136 | td, 137 | th 138 | vertical-align: top 139 | &:not([align]) 140 | text-align: left 141 | th 142 | color: $text-strong 143 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/base/helpers.sass: -------------------------------------------------------------------------------- 1 | // Float 2 | 3 | .is-clearfix 4 | +clearfix 5 | 6 | .is-pulled-left 7 | float: left !important 8 | 9 | .is-pulled-right 10 | float: right !important 11 | 12 | // Overflow 13 | 14 | .is-clipped 15 | overflow: hidden !important 16 | 17 | // Overlay 18 | 19 | .is-overlay 20 | @extend %overlay 21 | 22 | // Typography 23 | 24 | =typography-size($target:'') 25 | @each $size in $sizes 26 | $i: index($sizes, $size) 27 | .is-size-#{$i}#{if($target == '', '', '-' + $target)} 28 | font-size: $size !important 29 | 30 | +typography-size() 31 | 32 | +mobile 33 | +typography-size('mobile') 34 | 35 | +tablet 36 | +typography-size('tablet') 37 | 38 | +touch 39 | +typography-size('touch') 40 | 41 | +desktop 42 | +typography-size('desktop') 43 | 44 | +widescreen 45 | +typography-size('widescreen') 46 | 47 | +fullhd 48 | +typography-size('fullhd') 49 | 50 | $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') 51 | 52 | @each $alignment, $text-align in $alignments 53 | .has-text-#{$alignment} 54 | text-align: #{$text-align} !important 55 | 56 | @each $alignment, $text-align in $alignments 57 | +mobile 58 | .has-text-#{$alignment}-mobile 59 | text-align: #{$text-align} !important 60 | +tablet 61 | .has-text-#{$alignment}-tablet 62 | text-align: #{$text-align} !important 63 | +tablet-only 64 | .has-text-#{$alignment}-tablet-only 65 | text-align: #{$text-align} !important 66 | +touch 67 | .has-text-#{$alignment}-touch 68 | text-align: #{$text-align} !important 69 | +desktop 70 | .has-text-#{$alignment}-desktop 71 | text-align: #{$text-align} !important 72 | +desktop-only 73 | .has-text-#{$alignment}-desktop-only 74 | text-align: #{$text-align} !important 75 | +widescreen 76 | .has-text-#{$alignment}-widescreen 77 | text-align: #{$text-align} !important 78 | +widescreen-only 79 | .has-text-#{$alignment}-widescreen-only 80 | text-align: #{$text-align} !important 81 | +fullhd 82 | .has-text-#{$alignment}-fullhd 83 | text-align: #{$text-align} !important 84 | 85 | .is-capitalized 86 | text-transform: capitalize !important 87 | 88 | .is-lowercase 89 | text-transform: lowercase !important 90 | 91 | .is-uppercase 92 | text-transform: uppercase !important 93 | 94 | .is-italic 95 | font-style: italic !important 96 | 97 | @each $name, $pair in $colors 98 | $color: nth($pair, 1) 99 | .has-text-#{$name} 100 | color: $color !important 101 | a.has-text-#{$name} 102 | &:hover, 103 | &:focus 104 | color: darken($color, 10%) !important 105 | .has-background-#{$name} 106 | background-color: $color !important 107 | 108 | @each $name, $shade in $shades 109 | .has-text-#{$name} 110 | color: $shade !important 111 | .has-background-#{$name} 112 | background-color: $shade !important 113 | 114 | .has-text-weight-light 115 | font-weight: $weight-light !important 116 | .has-text-weight-normal 117 | font-weight: $weight-normal !important 118 | .has-text-weight-medium 119 | font-weight: $weight-medium !important 120 | .has-text-weight-semibold 121 | font-weight: $weight-semibold !important 122 | .has-text-weight-bold 123 | font-weight: $weight-bold !important 124 | 125 | .is-family-primary 126 | font-family: $family-primary !important 127 | 128 | .is-family-secondary 129 | font-family: $family-secondary !important 130 | 131 | .is-family-sans-serif 132 | font-family: $family-sans-serif !important 133 | 134 | .is-family-monospace 135 | font-family: $family-monospace !important 136 | 137 | .is-family-code 138 | font-family: $family-code !important 139 | 140 | // Visibility 141 | 142 | $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' 143 | 144 | @each $display in $displays 145 | .is-#{$display} 146 | display: #{$display} !important 147 | +mobile 148 | .is-#{$display}-mobile 149 | display: #{$display} !important 150 | +tablet 151 | .is-#{$display}-tablet 152 | display: #{$display} !important 153 | +tablet-only 154 | .is-#{$display}-tablet-only 155 | display: #{$display} !important 156 | +touch 157 | .is-#{$display}-touch 158 | display: #{$display} !important 159 | +desktop 160 | .is-#{$display}-desktop 161 | display: #{$display} !important 162 | +desktop-only 163 | .is-#{$display}-desktop-only 164 | display: #{$display} !important 165 | +widescreen 166 | .is-#{$display}-widescreen 167 | display: #{$display} !important 168 | +widescreen-only 169 | .is-#{$display}-widescreen-only 170 | display: #{$display} !important 171 | +fullhd 172 | .is-#{$display}-fullhd 173 | display: #{$display} !important 174 | 175 | .is-hidden 176 | display: none !important 177 | 178 | .is-sr-only 179 | border: none !important 180 | clip: rect(0, 0, 0, 0) !important 181 | height: 0.01em !important 182 | overflow: hidden !important 183 | padding: 0 !important 184 | position: absolute !important 185 | white-space: nowrap !important 186 | width: 0.01em !important 187 | 188 | +mobile 189 | .is-hidden-mobile 190 | display: none !important 191 | 192 | +tablet 193 | .is-hidden-tablet 194 | display: none !important 195 | 196 | +tablet-only 197 | .is-hidden-tablet-only 198 | display: none !important 199 | 200 | +touch 201 | .is-hidden-touch 202 | display: none !important 203 | 204 | +desktop 205 | .is-hidden-desktop 206 | display: none !important 207 | 208 | +desktop-only 209 | .is-hidden-desktop-only 210 | display: none !important 211 | 212 | +widescreen 213 | .is-hidden-widescreen 214 | display: none !important 215 | 216 | +widescreen-only 217 | .is-hidden-widescreen-only 218 | display: none !important 219 | 220 | +fullhd 221 | .is-hidden-fullhd 222 | display: none !important 223 | 224 | .is-invisible 225 | visibility: hidden !important 226 | 227 | +mobile 228 | .is-invisible-mobile 229 | visibility: hidden !important 230 | 231 | +tablet 232 | .is-invisible-tablet 233 | visibility: hidden !important 234 | 235 | +tablet-only 236 | .is-invisible-tablet-only 237 | visibility: hidden !important 238 | 239 | +touch 240 | .is-invisible-touch 241 | visibility: hidden !important 242 | 243 | +desktop 244 | .is-invisible-desktop 245 | visibility: hidden !important 246 | 247 | +desktop-only 248 | .is-invisible-desktop-only 249 | visibility: hidden !important 250 | 251 | +widescreen 252 | .is-invisible-widescreen 253 | visibility: hidden !important 254 | 255 | +widescreen-only 256 | .is-invisible-widescreen-only 257 | visibility: hidden !important 258 | 259 | +fullhd 260 | .is-invisible-fullhd 261 | visibility: hidden !important 262 | 263 | // Other 264 | 265 | .is-marginless 266 | margin: 0 !important 267 | 268 | .is-paddingless 269 | padding: 0 !important 270 | 271 | .is-radiusless 272 | border-radius: 0 !important 273 | 274 | .is-shadowless 275 | box-shadow: none !important 276 | 277 | .is-unselectable 278 | @extend %unselectable 279 | 280 | .is-relative 281 | position: relative !important 282 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/base/minireset.sass: -------------------------------------------------------------------------------- 1 | /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ 2 | // Blocks 3 | html, 4 | body, 5 | p, 6 | ol, 7 | ul, 8 | li, 9 | dl, 10 | dt, 11 | dd, 12 | blockquote, 13 | figure, 14 | fieldset, 15 | legend, 16 | textarea, 17 | pre, 18 | iframe, 19 | hr, 20 | h1, 21 | h2, 22 | h3, 23 | h4, 24 | h5, 25 | h6 26 | margin: 0 27 | padding: 0 28 | 29 | // Headings 30 | h1, 31 | h2, 32 | h3, 33 | h4, 34 | h5, 35 | h6 36 | font-size: 100% 37 | font-weight: normal 38 | 39 | // List 40 | ul 41 | list-style: none 42 | 43 | // Form 44 | button, 45 | input, 46 | select, 47 | textarea 48 | margin: 0 49 | 50 | // Box sizing 51 | html 52 | box-sizing: border-box 53 | 54 | * 55 | &, 56 | &::before, 57 | &::after 58 | box-sizing: inherit 59 | 60 | // Media 61 | img, 62 | video 63 | height: auto 64 | max-width: 100% 65 | 66 | // Iframe 67 | iframe 68 | border: 0 69 | 70 | // Table 71 | table 72 | border-collapse: collapse 73 | border-spacing: 0 74 | 75 | td, 76 | th 77 | padding: 0 78 | &:not([align]) 79 | text-align: left 80 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/_all.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "breadcrumb.sass" 4 | @import "card.sass" 5 | @import "dropdown.sass" 6 | @import "level.sass" 7 | @import "list.sass" 8 | @import "media.sass" 9 | @import "menu.sass" 10 | @import "message.sass" 11 | @import "modal.sass" 12 | @import "navbar.sass" 13 | @import "pagination.sass" 14 | @import "panel.sass" 15 | @import "tabs.sass" 16 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/breadcrumb.sass: -------------------------------------------------------------------------------- 1 | $breadcrumb-item-color: $link !default 2 | $breadcrumb-item-hover-color: $link-hover !default 3 | $breadcrumb-item-active-color: $text-strong !default 4 | 5 | $breadcrumb-item-padding-vertical: 0 !default 6 | $breadcrumb-item-padding-horizontal: 0.75em !default 7 | 8 | $breadcrumb-item-separator-color: $border-hover !default 9 | 10 | .breadcrumb 11 | @extend %block 12 | @extend %unselectable 13 | font-size: $size-normal 14 | white-space: nowrap 15 | a 16 | align-items: center 17 | color: $breadcrumb-item-color 18 | display: flex 19 | justify-content: center 20 | padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal 21 | &:hover 22 | color: $breadcrumb-item-hover-color 23 | li 24 | align-items: center 25 | display: flex 26 | &:first-child a 27 | padding-left: 0 28 | &.is-active 29 | a 30 | color: $breadcrumb-item-active-color 31 | cursor: default 32 | pointer-events: none 33 | & + li::before 34 | color: $breadcrumb-item-separator-color 35 | content: "\0002f" 36 | ul, 37 | ol 38 | align-items: flex-start 39 | display: flex 40 | flex-wrap: wrap 41 | justify-content: flex-start 42 | .icon 43 | &:first-child 44 | margin-right: 0.5em 45 | &:last-child 46 | margin-left: 0.5em 47 | // Alignment 48 | &.is-centered 49 | ol, 50 | ul 51 | justify-content: center 52 | &.is-right 53 | ol, 54 | ul 55 | justify-content: flex-end 56 | // Sizes 57 | &.is-small 58 | font-size: $size-small 59 | &.is-medium 60 | font-size: $size-medium 61 | &.is-large 62 | font-size: $size-large 63 | // Styles 64 | &.has-arrow-separator 65 | li + li::before 66 | content: "\02192" 67 | &.has-bullet-separator 68 | li + li::before 69 | content: "\02022" 70 | &.has-dot-separator 71 | li + li::before 72 | content: "\000b7" 73 | &.has-succeeds-separator 74 | li + li::before 75 | content: "\0227B" 76 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/card.sass: -------------------------------------------------------------------------------- 1 | $card-color: $text !default 2 | $card-background-color: $scheme-main !default 3 | $card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default 4 | 5 | $card-header-background-color: transparent !default 6 | $card-header-color: $text-strong !default 7 | $card-header-padding: 0.75rem 1rem !default 8 | $card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default 9 | $card-header-weight: $weight-bold !default 10 | 11 | $card-content-background-color: transparent !default 12 | $card-content-padding: 1.5rem !default 13 | 14 | $card-footer-background-color: transparent !default 15 | $card-footer-border-top: 1px solid $border-light !default 16 | $card-footer-padding: 0.75rem !default 17 | 18 | $card-media-margin: $block-spacing !default 19 | 20 | .card 21 | background-color: $card-background-color 22 | box-shadow: $card-shadow 23 | color: $card-color 24 | max-width: 100% 25 | position: relative 26 | 27 | .card-header 28 | background-color: $card-header-background-color 29 | align-items: stretch 30 | box-shadow: $card-header-shadow 31 | display: flex 32 | 33 | .card-header-title 34 | align-items: center 35 | color: $card-header-color 36 | display: flex 37 | flex-grow: 1 38 | font-weight: $card-header-weight 39 | padding: $card-header-padding 40 | &.is-centered 41 | justify-content: center 42 | 43 | .card-header-icon 44 | align-items: center 45 | cursor: pointer 46 | display: flex 47 | justify-content: center 48 | padding: $card-header-padding 49 | 50 | .card-image 51 | display: block 52 | position: relative 53 | 54 | .card-content 55 | background-color: $card-content-background-color 56 | padding: $card-content-padding 57 | 58 | .card-footer 59 | background-color: $card-footer-background-color 60 | border-top: $card-footer-border-top 61 | align-items: stretch 62 | display: flex 63 | 64 | .card-footer-item 65 | align-items: center 66 | display: flex 67 | flex-basis: 0 68 | flex-grow: 1 69 | flex-shrink: 0 70 | justify-content: center 71 | padding: $card-footer-padding 72 | &:not(:last-child) 73 | border-right: $card-footer-border-top 74 | 75 | // Combinations 76 | 77 | .card 78 | .media:not(:last-child) 79 | margin-bottom: $card-media-margin 80 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/dropdown.sass: -------------------------------------------------------------------------------- 1 | $dropdown-menu-min-width: 12rem !default 2 | 3 | $dropdown-content-background-color: $scheme-main !default 4 | $dropdown-content-arrow: $link !default 5 | $dropdown-content-offset: 4px !default 6 | $dropdown-content-padding-bottom: 0.5rem !default 7 | $dropdown-content-padding-top: 0.5rem !default 8 | $dropdown-content-radius: $radius !default 9 | $dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default 10 | $dropdown-content-z: 20 !default 11 | 12 | $dropdown-item-color: $text !default 13 | $dropdown-item-hover-color: $scheme-invert !default 14 | $dropdown-item-hover-background-color: $background !default 15 | $dropdown-item-active-color: $link-invert !default 16 | $dropdown-item-active-background-color: $link !default 17 | 18 | $dropdown-divider-background-color: $border-light !default 19 | 20 | .dropdown 21 | display: inline-flex 22 | position: relative 23 | vertical-align: top 24 | &.is-active, 25 | &.is-hoverable:hover 26 | .dropdown-menu 27 | display: block 28 | &.is-right 29 | .dropdown-menu 30 | left: auto 31 | right: 0 32 | &.is-up 33 | .dropdown-menu 34 | bottom: 100% 35 | padding-bottom: $dropdown-content-offset 36 | padding-top: initial 37 | top: auto 38 | 39 | .dropdown-menu 40 | display: none 41 | left: 0 42 | min-width: $dropdown-menu-min-width 43 | padding-top: $dropdown-content-offset 44 | position: absolute 45 | top: 100% 46 | z-index: $dropdown-content-z 47 | 48 | .dropdown-content 49 | background-color: $dropdown-content-background-color 50 | border-radius: $dropdown-content-radius 51 | box-shadow: $dropdown-content-shadow 52 | padding-bottom: $dropdown-content-padding-bottom 53 | padding-top: $dropdown-content-padding-top 54 | 55 | .dropdown-item 56 | color: $dropdown-item-color 57 | display: block 58 | font-size: 0.875rem 59 | line-height: 1.5 60 | padding: 0.375rem 1rem 61 | position: relative 62 | 63 | a.dropdown-item, 64 | button.dropdown-item 65 | padding-right: 3rem 66 | text-align: left 67 | white-space: nowrap 68 | width: 100% 69 | &:hover 70 | background-color: $dropdown-item-hover-background-color 71 | color: $dropdown-item-hover-color 72 | &.is-active 73 | background-color: $dropdown-item-active-background-color 74 | color: $dropdown-item-active-color 75 | 76 | .dropdown-divider 77 | background-color: $dropdown-divider-background-color 78 | border: none 79 | display: block 80 | height: 1px 81 | margin: 0.5rem 0 82 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/level.sass: -------------------------------------------------------------------------------- 1 | $level-item-spacing: ($block-spacing / 2) !default 2 | 3 | .level 4 | @extend %block 5 | align-items: center 6 | justify-content: space-between 7 | code 8 | border-radius: $radius 9 | img 10 | display: inline-block 11 | vertical-align: top 12 | // Modifiers 13 | &.is-mobile 14 | display: flex 15 | .level-left, 16 | .level-right 17 | display: flex 18 | .level-left + .level-right 19 | margin-top: 0 20 | .level-item 21 | &:not(:last-child) 22 | margin-bottom: 0 23 | margin-right: $level-item-spacing 24 | &:not(.is-narrow) 25 | flex-grow: 1 26 | // Responsiveness 27 | +tablet 28 | display: flex 29 | & > .level-item 30 | &:not(.is-narrow) 31 | flex-grow: 1 32 | 33 | .level-item 34 | align-items: center 35 | display: flex 36 | flex-basis: auto 37 | flex-grow: 0 38 | flex-shrink: 0 39 | justify-content: center 40 | .title, 41 | .subtitle 42 | margin-bottom: 0 43 | // Responsiveness 44 | +mobile 45 | &:not(:last-child) 46 | margin-bottom: $level-item-spacing 47 | 48 | .level-left, 49 | .level-right 50 | flex-basis: auto 51 | flex-grow: 0 52 | flex-shrink: 0 53 | .level-item 54 | // Modifiers 55 | &.is-flexible 56 | flex-grow: 1 57 | // Responsiveness 58 | +tablet 59 | &:not(:last-child) 60 | margin-right: $level-item-spacing 61 | 62 | .level-left 63 | align-items: center 64 | justify-content: flex-start 65 | // Responsiveness 66 | +mobile 67 | & + .level-right 68 | margin-top: 1.5rem 69 | +tablet 70 | display: flex 71 | 72 | .level-right 73 | align-items: center 74 | justify-content: flex-end 75 | // Responsiveness 76 | +tablet 77 | display: flex 78 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/list.sass: -------------------------------------------------------------------------------- 1 | $list-background-color: $scheme-main !default 2 | $list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default 3 | $list-radius: $radius !default 4 | 5 | $list-item-border: 1px solid $border !default 6 | $list-item-color: $text !default 7 | $list-item-active-background-color: $link !default 8 | $list-item-active-color: $link-invert !default 9 | $list-item-hover-background-color: $background !default 10 | 11 | .list 12 | @extend %block 13 | background-color: $list-background-color 14 | border-radius: $list-radius 15 | box-shadow: $list-shadow 16 | // &.is-hoverable > .list-item:hover:not(.is-active) 17 | // background-color: $list-item-hover-background-color 18 | // cursor: pointer 19 | 20 | .list-item 21 | display: block 22 | padding: 0.5em 1em 23 | &:not(a) 24 | color: $list-item-color 25 | &:first-child 26 | border-top-left-radius: $list-radius 27 | border-top-right-radius: $list-radius 28 | &:last-child 29 | border-bottom-left-radius: $list-radius 30 | border-bottom-right-radius: $list-radius 31 | &:not(:last-child) 32 | border-bottom: $list-item-border 33 | &.is-active 34 | background-color: $list-item-active-background-color 35 | color: $list-item-active-color 36 | 37 | a.list-item 38 | background-color: $list-item-hover-background-color 39 | cursor: pointer 40 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/media.sass: -------------------------------------------------------------------------------- 1 | $media-border-color: rgba($border, 0.5) !default 2 | 3 | .media 4 | align-items: flex-start 5 | display: flex 6 | text-align: left 7 | .content:not(:last-child) 8 | margin-bottom: 0.75rem 9 | .media 10 | border-top: 1px solid $media-border-color 11 | display: flex 12 | padding-top: 0.75rem 13 | .content:not(:last-child), 14 | .control:not(:last-child) 15 | margin-bottom: 0.5rem 16 | .media 17 | padding-top: 0.5rem 18 | & + .media 19 | margin-top: 0.5rem 20 | & + .media 21 | border-top: 1px solid $media-border-color 22 | margin-top: 1rem 23 | padding-top: 1rem 24 | // Sizes 25 | &.is-large 26 | & + .media 27 | margin-top: 1.5rem 28 | padding-top: 1.5rem 29 | 30 | .media-left, 31 | .media-right 32 | flex-basis: auto 33 | flex-grow: 0 34 | flex-shrink: 0 35 | 36 | .media-left 37 | margin-right: 1rem 38 | 39 | .media-right 40 | margin-left: 1rem 41 | 42 | .media-content 43 | flex-basis: auto 44 | flex-grow: 1 45 | flex-shrink: 1 46 | text-align: left 47 | 48 | +mobile 49 | .media-content 50 | overflow-x: auto 51 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/menu.sass: -------------------------------------------------------------------------------- 1 | $menu-item-color: $text !default 2 | $menu-item-radius: $radius-small !default 3 | $menu-item-hover-color: $text-strong !default 4 | $menu-item-hover-background-color: $background !default 5 | $menu-item-active-color: $link-invert !default 6 | $menu-item-active-background-color: $link !default 7 | 8 | $menu-list-border-left: 1px solid $border !default 9 | $menu-list-line-height: 1.25 !default 10 | $menu-list-link-padding: 0.5em 0.75em !default 11 | $menu-nested-list-margin: 0.75em !default 12 | $menu-nested-list-padding-left: 0.75em !default 13 | 14 | $menu-label-color: $text-light !default 15 | $menu-label-font-size: 0.75em !default 16 | $menu-label-letter-spacing: 0.1em !default 17 | $menu-label-spacing: 1em !default 18 | 19 | .menu 20 | font-size: $size-normal 21 | // Sizes 22 | &.is-small 23 | font-size: $size-small 24 | &.is-medium 25 | font-size: $size-medium 26 | &.is-large 27 | font-size: $size-large 28 | 29 | .menu-list 30 | line-height: $menu-list-line-height 31 | a 32 | border-radius: $menu-item-radius 33 | color: $menu-item-color 34 | display: block 35 | padding: $menu-list-link-padding 36 | &:hover 37 | background-color: $menu-item-hover-background-color 38 | color: $menu-item-hover-color 39 | // Modifiers 40 | &.is-active 41 | background-color: $menu-item-active-background-color 42 | color: $menu-item-active-color 43 | li 44 | ul 45 | border-left: $menu-list-border-left 46 | margin: $menu-nested-list-margin 47 | padding-left: $menu-nested-list-padding-left 48 | 49 | .menu-label 50 | color: $menu-label-color 51 | font-size: $menu-label-font-size 52 | letter-spacing: $menu-label-letter-spacing 53 | text-transform: uppercase 54 | &:not(:first-child) 55 | margin-top: $menu-label-spacing 56 | &:not(:last-child) 57 | margin-bottom: $menu-label-spacing 58 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/message.sass: -------------------------------------------------------------------------------- 1 | $message-background-color: $background !default 2 | $message-radius: $radius !default 3 | 4 | $message-header-background-color: $text !default 5 | $message-header-color: $text-invert !default 6 | $message-header-weight: $weight-bold !default 7 | $message-header-padding: 0.75em 1em !default 8 | $message-header-radius: $radius !default 9 | 10 | $message-body-border-color: $border !default 11 | $message-body-border-width: 0 0 0 4px !default 12 | $message-body-color: $text !default 13 | $message-body-padding: 1.25em 1.5em !default 14 | $message-body-radius: $radius !default 15 | 16 | $message-body-pre-background-color: $scheme-main !default 17 | $message-body-pre-code-background-color: transparent !default 18 | 19 | $message-header-body-border-width: 0 !default 20 | $message-colors: $colors !default 21 | 22 | .message 23 | @extend %block 24 | background-color: $message-background-color 25 | border-radius: $message-radius 26 | font-size: $size-normal 27 | strong 28 | color: currentColor 29 | a:not(.button):not(.tag):not(.dropdown-item) 30 | color: currentColor 31 | text-decoration: underline 32 | // Sizes 33 | &.is-small 34 | font-size: $size-small 35 | &.is-medium 36 | font-size: $size-medium 37 | &.is-large 38 | font-size: $size-large 39 | // Colors 40 | @each $name, $components in $message-colors 41 | $color: nth($components, 1) 42 | $color-invert: nth($components, 2) 43 | $color-light: null 44 | $color-dark: null 45 | 46 | @if length($components) >= 3 47 | $color-light: nth($components, 3) 48 | @if length($components) >= 4 49 | $color-dark: nth($components, 4) 50 | @else 51 | $color-luminance: colorLuminance($color) 52 | $darken-percentage: $color-luminance * 70% 53 | $desaturate-percentage: $color-luminance * 30% 54 | $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage) 55 | @else 56 | $color-lightning: max((100% - lightness($color)) - 2%, 0%) 57 | $color-light: lighten($color, $color-lightning) 58 | 59 | &.is-#{$name} 60 | background-color: $color-light 61 | .message-header 62 | background-color: $color 63 | color: $color-invert 64 | .message-body 65 | border-color: $color 66 | color: $color-dark 67 | 68 | .message-header 69 | align-items: center 70 | background-color: $message-header-background-color 71 | border-radius: $message-header-radius $message-header-radius 0 0 72 | color: $message-header-color 73 | display: flex 74 | font-weight: $message-header-weight 75 | justify-content: space-between 76 | line-height: 1.25 77 | padding: $message-header-padding 78 | position: relative 79 | .delete 80 | flex-grow: 0 81 | flex-shrink: 0 82 | margin-left: 0.75em 83 | & + .message-body 84 | border-width: $message-header-body-border-width 85 | border-top-left-radius: 0 86 | border-top-right-radius: 0 87 | 88 | .message-body 89 | border-color: $message-body-border-color 90 | border-radius: $message-body-radius 91 | border-style: solid 92 | border-width: $message-body-border-width 93 | color: $message-body-color 94 | padding: $message-body-padding 95 | code, 96 | pre 97 | background-color: $message-body-pre-background-color 98 | pre code 99 | background-color: $message-body-pre-code-background-color 100 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/modal.sass: -------------------------------------------------------------------------------- 1 | $modal-z: 40 !default 2 | 3 | $modal-background-background-color: rgba($scheme-invert, 0.86) !default 4 | 5 | $modal-content-width: 640px !default 6 | $modal-content-margin-mobile: 20px !default 7 | $modal-content-spacing-mobile: 160px !default 8 | $modal-content-spacing-tablet: 40px !default 9 | 10 | $modal-close-dimensions: 40px !default 11 | $modal-close-right: 20px !default 12 | $modal-close-top: 20px !default 13 | 14 | $modal-card-spacing: 40px !default 15 | 16 | $modal-card-head-background-color: $background !default 17 | $modal-card-head-border-bottom: 1px solid $border !default 18 | $modal-card-head-padding: 20px !default 19 | $modal-card-head-radius: $radius-large !default 20 | 21 | $modal-card-title-color: $text-strong !default 22 | $modal-card-title-line-height: 1 !default 23 | $modal-card-title-size: $size-4 !default 24 | 25 | $modal-card-foot-radius: $radius-large !default 26 | $modal-card-foot-border-top: 1px solid $border !default 27 | 28 | $modal-card-body-background-color: $scheme-main !default 29 | $modal-card-body-padding: 20px !default 30 | 31 | .modal 32 | @extend %overlay 33 | align-items: center 34 | display: none 35 | flex-direction: column 36 | justify-content: center 37 | overflow: hidden 38 | position: fixed 39 | z-index: $modal-z 40 | // Modifiers 41 | &.is-active 42 | display: flex 43 | 44 | .modal-background 45 | @extend %overlay 46 | background-color: $modal-background-background-color 47 | 48 | .modal-content, 49 | .modal-card 50 | margin: 0 $modal-content-margin-mobile 51 | max-height: calc(100vh - #{$modal-content-spacing-mobile}) 52 | overflow: auto 53 | position: relative 54 | width: 100% 55 | // Responsiveness 56 | +tablet 57 | margin: 0 auto 58 | max-height: calc(100vh - #{$modal-content-spacing-tablet}) 59 | width: $modal-content-width 60 | 61 | .modal-close 62 | @extend %delete 63 | background: none 64 | height: $modal-close-dimensions 65 | position: fixed 66 | right: $modal-close-right 67 | top: $modal-close-top 68 | width: $modal-close-dimensions 69 | 70 | .modal-card 71 | display: flex 72 | flex-direction: column 73 | max-height: calc(100vh - #{$modal-card-spacing}) 74 | overflow: hidden 75 | -ms-overflow-y: visible 76 | 77 | .modal-card-head, 78 | .modal-card-foot 79 | align-items: center 80 | background-color: $modal-card-head-background-color 81 | display: flex 82 | flex-shrink: 0 83 | justify-content: flex-start 84 | padding: $modal-card-head-padding 85 | position: relative 86 | 87 | .modal-card-head 88 | border-bottom: $modal-card-head-border-bottom 89 | border-top-left-radius: $modal-card-head-radius 90 | border-top-right-radius: $modal-card-head-radius 91 | 92 | .modal-card-title 93 | color: $modal-card-title-color 94 | flex-grow: 1 95 | flex-shrink: 0 96 | font-size: $modal-card-title-size 97 | line-height: $modal-card-title-line-height 98 | 99 | .modal-card-foot 100 | border-bottom-left-radius: $modal-card-foot-radius 101 | border-bottom-right-radius: $modal-card-foot-radius 102 | border-top: $modal-card-foot-border-top 103 | .button 104 | &:not(:last-child) 105 | margin-right: 0.5em 106 | 107 | .modal-card-body 108 | +overflow-touch 109 | background-color: $modal-card-body-background-color 110 | flex-grow: 1 111 | flex-shrink: 1 112 | overflow: auto 113 | padding: $modal-card-body-padding 114 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/pagination.sass: -------------------------------------------------------------------------------- 1 | $pagination-color: $text-strong !default 2 | $pagination-border-color: $border !default 3 | $pagination-margin: -0.25rem !default 4 | $pagination-min-width: $control-height !default 5 | 6 | $pagination-item-font-size: 1em !default 7 | $pagination-item-margin: 0.25rem !default 8 | $pagination-item-padding-left: 0.5em !default 9 | $pagination-item-padding-right: 0.5em !default 10 | 11 | $pagination-hover-color: $link-hover !default 12 | $pagination-hover-border-color: $link-hover-border !default 13 | 14 | $pagination-focus-color: $link-focus !default 15 | $pagination-focus-border-color: $link-focus-border !default 16 | 17 | $pagination-active-color: $link-active !default 18 | $pagination-active-border-color: $link-active-border !default 19 | 20 | $pagination-disabled-color: $text-light !default 21 | $pagination-disabled-background-color: $border !default 22 | $pagination-disabled-border-color: $border !default 23 | 24 | $pagination-current-color: $link-invert !default 25 | $pagination-current-background-color: $link !default 26 | $pagination-current-border-color: $link !default 27 | 28 | $pagination-ellipsis-color: $grey-light !default 29 | 30 | $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) 31 | 32 | .pagination 33 | @extend %block 34 | font-size: $size-normal 35 | margin: $pagination-margin 36 | // Sizes 37 | &.is-small 38 | font-size: $size-small 39 | &.is-medium 40 | font-size: $size-medium 41 | &.is-large 42 | font-size: $size-large 43 | &.is-rounded 44 | .pagination-previous, 45 | .pagination-next 46 | padding-left: 1em 47 | padding-right: 1em 48 | border-radius: $radius-rounded 49 | .pagination-link 50 | border-radius: $radius-rounded 51 | 52 | .pagination, 53 | .pagination-list 54 | align-items: center 55 | display: flex 56 | justify-content: center 57 | text-align: center 58 | 59 | .pagination-previous, 60 | .pagination-next, 61 | .pagination-link, 62 | .pagination-ellipsis 63 | @extend %control 64 | @extend %unselectable 65 | font-size: $pagination-item-font-size 66 | justify-content: center 67 | margin: $pagination-item-margin 68 | padding-left: $pagination-item-padding-left 69 | padding-right: $pagination-item-padding-right 70 | text-align: center 71 | 72 | .pagination-previous, 73 | .pagination-next, 74 | .pagination-link 75 | border-color: $pagination-border-color 76 | color: $pagination-color 77 | min-width: $pagination-min-width 78 | &:hover 79 | border-color: $pagination-hover-border-color 80 | color: $pagination-hover-color 81 | &:focus 82 | border-color: $pagination-focus-border-color 83 | &:active 84 | box-shadow: $pagination-shadow-inset 85 | &[disabled] 86 | background-color: $pagination-disabled-background-color 87 | border-color: $pagination-disabled-border-color 88 | box-shadow: none 89 | color: $pagination-disabled-color 90 | opacity: 0.5 91 | 92 | .pagination-previous, 93 | .pagination-next 94 | padding-left: 0.75em 95 | padding-right: 0.75em 96 | white-space: nowrap 97 | 98 | .pagination-link 99 | &.is-current 100 | background-color: $pagination-current-background-color 101 | border-color: $pagination-current-border-color 102 | color: $pagination-current-color 103 | 104 | .pagination-ellipsis 105 | color: $pagination-ellipsis-color 106 | pointer-events: none 107 | 108 | .pagination-list 109 | flex-wrap: wrap 110 | 111 | +mobile 112 | .pagination 113 | flex-wrap: wrap 114 | .pagination-previous, 115 | .pagination-next 116 | flex-grow: 1 117 | flex-shrink: 1 118 | .pagination-list 119 | li 120 | flex-grow: 1 121 | flex-shrink: 1 122 | 123 | +tablet 124 | .pagination-list 125 | flex-grow: 1 126 | flex-shrink: 1 127 | justify-content: flex-start 128 | order: 1 129 | .pagination-previous 130 | order: 2 131 | .pagination-next 132 | order: 3 133 | .pagination 134 | justify-content: space-between 135 | &.is-centered 136 | .pagination-previous 137 | order: 1 138 | .pagination-list 139 | justify-content: center 140 | order: 2 141 | .pagination-next 142 | order: 3 143 | &.is-right 144 | .pagination-previous 145 | order: 1 146 | .pagination-next 147 | order: 2 148 | .pagination-list 149 | justify-content: flex-end 150 | order: 3 151 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/panel.sass: -------------------------------------------------------------------------------- 1 | $panel-margin: $block-spacing !default 2 | $panel-item-border: 1px solid $border-light !default 3 | $panel-radius: $radius-large !default 4 | $panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default 5 | 6 | $panel-heading-background-color: $border-light !default 7 | $panel-heading-color: $text-strong !default 8 | $panel-heading-line-height: 1.25 !default 9 | $panel-heading-padding: 0.75em 1em !default 10 | $panel-heading-radius: $radius !default 11 | $panel-heading-size: 1.25em !default 12 | $panel-heading-weight: $weight-bold !default 13 | 14 | $panel-tabs-font-size: 0.875em !default 15 | $panel-tab-border-bottom: 1px solid $border !default 16 | $panel-tab-active-border-bottom-color: $link-active-border !default 17 | $panel-tab-active-color: $link-active !default 18 | 19 | $panel-list-item-color: $text !default 20 | $panel-list-item-hover-color: $link !default 21 | 22 | $panel-block-color: $text-strong !default 23 | $panel-block-hover-background-color: $background !default 24 | $panel-block-active-border-left-color: $link !default 25 | $panel-block-active-color: $link-active !default 26 | $panel-block-active-icon-color: $link !default 27 | 28 | $panel-icon-color: $text-light !default 29 | 30 | .panel 31 | border-radius: $panel-radius 32 | box-shadow: $panel-shadow 33 | font-size: $size-normal 34 | &:not(:last-child) 35 | margin-bottom: $panel-margin 36 | // Colors 37 | @each $name, $components in $message-colors 38 | $color: nth($components, 1) 39 | $color-invert: nth($components, 2) 40 | &.is-#{$name} 41 | .panel-heading 42 | background-color: $color 43 | color: $color-invert 44 | .panel-tabs a.is-active 45 | border-bottom-color: $color 46 | .panel-block.is-active .panel-icon 47 | color: $color 48 | 49 | .panel-tabs, 50 | .panel-block 51 | &:not(:last-child) 52 | border-bottom: $panel-item-border 53 | 54 | .panel-heading 55 | background-color: $panel-heading-background-color 56 | border-radius: $panel-radius $panel-radius 0 0 57 | color: $panel-heading-color 58 | font-size: $panel-heading-size 59 | font-weight: $panel-heading-weight 60 | line-height: $panel-heading-line-height 61 | padding: $panel-heading-padding 62 | 63 | .panel-tabs 64 | align-items: flex-end 65 | display: flex 66 | font-size: $panel-tabs-font-size 67 | justify-content: center 68 | a 69 | border-bottom: $panel-tab-border-bottom 70 | margin-bottom: -1px 71 | padding: 0.5em 72 | // Modifiers 73 | &.is-active 74 | border-bottom-color: $panel-tab-active-border-bottom-color 75 | color: $panel-tab-active-color 76 | 77 | .panel-list 78 | a 79 | color: $panel-list-item-color 80 | &:hover 81 | color: $panel-list-item-hover-color 82 | 83 | .panel-block 84 | align-items: center 85 | color: $panel-block-color 86 | display: flex 87 | justify-content: flex-start 88 | padding: 0.5em 0.75em 89 | input[type="checkbox"] 90 | margin-right: 0.75em 91 | & > .control 92 | flex-grow: 1 93 | flex-shrink: 1 94 | width: 100% 95 | &.is-wrapped 96 | flex-wrap: wrap 97 | &.is-active 98 | border-left-color: $panel-block-active-border-left-color 99 | color: $panel-block-active-color 100 | .panel-icon 101 | color: $panel-block-active-icon-color 102 | &:last-child 103 | border-bottom-left-radius: $panel-radius 104 | border-bottom-right-radius: $panel-radius 105 | 106 | a.panel-block, 107 | label.panel-block 108 | cursor: pointer 109 | &:hover 110 | background-color: $panel-block-hover-background-color 111 | 112 | .panel-icon 113 | +fa(14px, 1em) 114 | color: $panel-icon-color 115 | margin-right: 0.75em 116 | .fa 117 | font-size: inherit 118 | line-height: inherit 119 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/components/tabs.sass: -------------------------------------------------------------------------------- 1 | $tabs-border-bottom-color: $border !default 2 | $tabs-border-bottom-style: solid !default 3 | $tabs-border-bottom-width: 1px !default 4 | $tabs-link-color: $text !default 5 | $tabs-link-hover-border-bottom-color: $text-strong !default 6 | $tabs-link-hover-color: $text-strong !default 7 | $tabs-link-active-border-bottom-color: $link !default 8 | $tabs-link-active-color: $link !default 9 | $tabs-link-padding: 0.5em 1em !default 10 | 11 | $tabs-boxed-link-radius: $radius !default 12 | $tabs-boxed-link-hover-background-color: $background !default 13 | $tabs-boxed-link-hover-border-bottom-color: $border !default 14 | 15 | $tabs-boxed-link-active-background-color: $scheme-main !default 16 | $tabs-boxed-link-active-border-color: $border !default 17 | $tabs-boxed-link-active-border-bottom-color: transparent !default 18 | 19 | $tabs-toggle-link-border-color: $border !default 20 | $tabs-toggle-link-border-style: solid !default 21 | $tabs-toggle-link-border-width: 1px !default 22 | $tabs-toggle-link-hover-background-color: $background !default 23 | $tabs-toggle-link-hover-border-color: $border-hover !default 24 | $tabs-toggle-link-radius: $radius !default 25 | $tabs-toggle-link-active-background-color: $link !default 26 | $tabs-toggle-link-active-border-color: $link !default 27 | $tabs-toggle-link-active-color: $link-invert !default 28 | 29 | .tabs 30 | @extend %block 31 | +overflow-touch 32 | @extend %unselectable 33 | align-items: stretch 34 | display: flex 35 | font-size: $size-normal 36 | justify-content: space-between 37 | overflow: hidden 38 | overflow-x: auto 39 | white-space: nowrap 40 | a 41 | align-items: center 42 | border-bottom-color: $tabs-border-bottom-color 43 | border-bottom-style: $tabs-border-bottom-style 44 | border-bottom-width: $tabs-border-bottom-width 45 | color: $tabs-link-color 46 | display: flex 47 | justify-content: center 48 | margin-bottom: -#{$tabs-border-bottom-width} 49 | padding: $tabs-link-padding 50 | vertical-align: top 51 | &:hover 52 | border-bottom-color: $tabs-link-hover-border-bottom-color 53 | color: $tabs-link-hover-color 54 | li 55 | display: block 56 | &.is-active 57 | a 58 | border-bottom-color: $tabs-link-active-border-bottom-color 59 | color: $tabs-link-active-color 60 | ul 61 | align-items: center 62 | border-bottom-color: $tabs-border-bottom-color 63 | border-bottom-style: $tabs-border-bottom-style 64 | border-bottom-width: $tabs-border-bottom-width 65 | display: flex 66 | flex-grow: 1 67 | flex-shrink: 0 68 | justify-content: flex-start 69 | &.is-left 70 | padding-right: 0.75em 71 | &.is-center 72 | flex: none 73 | justify-content: center 74 | padding-left: 0.75em 75 | padding-right: 0.75em 76 | &.is-right 77 | justify-content: flex-end 78 | padding-left: 0.75em 79 | .icon 80 | &:first-child 81 | margin-right: 0.5em 82 | &:last-child 83 | margin-left: 0.5em 84 | // Alignment 85 | &.is-centered 86 | ul 87 | justify-content: center 88 | &.is-right 89 | ul 90 | justify-content: flex-end 91 | // Styles 92 | &.is-boxed 93 | a 94 | border: 1px solid transparent 95 | border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 96 | &:hover 97 | background-color: $tabs-boxed-link-hover-background-color 98 | border-bottom-color: $tabs-boxed-link-hover-border-bottom-color 99 | li 100 | &.is-active 101 | a 102 | background-color: $tabs-boxed-link-active-background-color 103 | border-color: $tabs-boxed-link-active-border-color 104 | border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important 105 | &.is-fullwidth 106 | li 107 | flex-grow: 1 108 | flex-shrink: 0 109 | &.is-toggle 110 | a 111 | border-color: $tabs-toggle-link-border-color 112 | border-style: $tabs-toggle-link-border-style 113 | border-width: $tabs-toggle-link-border-width 114 | margin-bottom: 0 115 | position: relative 116 | &:hover 117 | background-color: $tabs-toggle-link-hover-background-color 118 | border-color: $tabs-toggle-link-hover-border-color 119 | z-index: 2 120 | li 121 | & + li 122 | margin-left: -#{$tabs-toggle-link-border-width} 123 | &:first-child a 124 | border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius 125 | &:last-child a 126 | border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 127 | &.is-active 128 | a 129 | background-color: $tabs-toggle-link-active-background-color 130 | border-color: $tabs-toggle-link-active-border-color 131 | color: $tabs-toggle-link-active-color 132 | z-index: 1 133 | ul 134 | border-bottom: none 135 | &.is-toggle-rounded 136 | li 137 | &:first-child a 138 | border-bottom-left-radius: $radius-rounded 139 | border-top-left-radius: $radius-rounded 140 | padding-left: 1.25em 141 | &:last-child a 142 | border-bottom-right-radius: $radius-rounded 143 | border-top-right-radius: $radius-rounded 144 | padding-right: 1.25em 145 | // Sizes 146 | &.is-small 147 | font-size: $size-small 148 | &.is-medium 149 | font-size: $size-medium 150 | &.is-large 151 | font-size: $size-large 152 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/_all.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "box.sass" 4 | @import "button.sass" 5 | @import "container.sass" 6 | @import "content.sass" 7 | @import "icon.sass" 8 | @import "image.sass" 9 | @import "notification.sass" 10 | @import "progress.sass" 11 | @import "table.sass" 12 | @import "tag.sass" 13 | @import "title.sass" 14 | 15 | @import "other.sass" 16 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/box.sass: -------------------------------------------------------------------------------- 1 | $box-color: $text !default 2 | $box-background-color: $scheme-main !default 3 | $box-radius: $radius-large !default 4 | $box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default 5 | $box-padding: 1.25rem !default 6 | 7 | $box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default 8 | $box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default 9 | 10 | .box 11 | @extend %block 12 | background-color: $box-background-color 13 | border-radius: $box-radius 14 | box-shadow: $box-shadow 15 | color: $box-color 16 | display: block 17 | padding: $box-padding 18 | 19 | a.box 20 | &:hover, 21 | &:focus 22 | box-shadow: $box-link-hover-shadow 23 | &:active 24 | box-shadow: $box-link-active-shadow 25 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/container.sass: -------------------------------------------------------------------------------- 1 | $container-offset: (2 * $gap) !default 2 | 3 | .container 4 | flex-grow: 1 5 | margin: 0 auto 6 | position: relative 7 | width: auto 8 | &.is-fluid 9 | max-width: none 10 | padding-left: $gap 11 | padding-right: $gap 12 | width: 100% 13 | +desktop 14 | max-width: $desktop - $container-offset 15 | +until-widescreen 16 | &.is-widescreen 17 | max-width: $widescreen - $container-offset 18 | +until-fullhd 19 | &.is-fullhd 20 | max-width: $fullhd - $container-offset 21 | +widescreen 22 | max-width: $widescreen - $container-offset 23 | +fullhd 24 | max-width: $fullhd - $container-offset 25 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/content.sass: -------------------------------------------------------------------------------- 1 | $content-heading-color: $text-strong !default 2 | $content-heading-weight: $weight-semibold !default 3 | $content-heading-line-height: 1.125 !default 4 | 5 | $content-blockquote-background-color: $background !default 6 | $content-blockquote-border-left: 5px solid $border !default 7 | $content-blockquote-padding: 1.25em 1.5em !default 8 | 9 | $content-pre-padding: 1.25em 1.5em !default 10 | 11 | $content-table-cell-border: 1px solid $border !default 12 | $content-table-cell-border-width: 0 0 1px !default 13 | $content-table-cell-padding: 0.5em 0.75em !default 14 | $content-table-cell-heading-color: $text-strong !default 15 | $content-table-head-cell-border-width: 0 0 2px !default 16 | $content-table-head-cell-color: $text-strong !default 17 | $content-table-foot-cell-border-width: 2px 0 0 !default 18 | $content-table-foot-cell-color: $text-strong !default 19 | 20 | .content 21 | @extend %block 22 | // Inline 23 | li + li 24 | margin-top: 0.25em 25 | // Block 26 | p, 27 | dl, 28 | ol, 29 | ul, 30 | blockquote, 31 | pre, 32 | table 33 | &:not(:last-child) 34 | margin-bottom: 1em 35 | h1, 36 | h2, 37 | h3, 38 | h4, 39 | h5, 40 | h6 41 | color: $content-heading-color 42 | font-weight: $content-heading-weight 43 | line-height: $content-heading-line-height 44 | h1 45 | font-size: 2em 46 | margin-bottom: 0.5em 47 | &:not(:first-child) 48 | margin-top: 1em 49 | h2 50 | font-size: 1.75em 51 | margin-bottom: 0.5714em 52 | &:not(:first-child) 53 | margin-top: 1.1428em 54 | h3 55 | font-size: 1.5em 56 | margin-bottom: 0.6666em 57 | &:not(:first-child) 58 | margin-top: 1.3333em 59 | h4 60 | font-size: 1.25em 61 | margin-bottom: 0.8em 62 | h5 63 | font-size: 1.125em 64 | margin-bottom: 0.8888em 65 | h6 66 | font-size: 1em 67 | margin-bottom: 1em 68 | blockquote 69 | background-color: $content-blockquote-background-color 70 | border-left: $content-blockquote-border-left 71 | padding: $content-blockquote-padding 72 | ol 73 | list-style-position: outside 74 | margin-left: 2em 75 | margin-top: 1em 76 | &:not([type]) 77 | list-style-type: decimal 78 | &.is-lower-alpha 79 | list-style-type: lower-alpha 80 | &.is-lower-roman 81 | list-style-type: lower-roman 82 | &.is-upper-alpha 83 | list-style-type: upper-alpha 84 | &.is-upper-roman 85 | list-style-type: upper-roman 86 | ul 87 | list-style: disc outside 88 | margin-left: 2em 89 | margin-top: 1em 90 | ul 91 | list-style-type: circle 92 | margin-top: 0.5em 93 | ul 94 | list-style-type: square 95 | dd 96 | margin-left: 2em 97 | figure 98 | margin-left: 2em 99 | margin-right: 2em 100 | text-align: center 101 | &:not(:first-child) 102 | margin-top: 2em 103 | &:not(:last-child) 104 | margin-bottom: 2em 105 | img 106 | display: inline-block 107 | figcaption 108 | font-style: italic 109 | pre 110 | +overflow-touch 111 | overflow-x: auto 112 | padding: $content-pre-padding 113 | white-space: pre 114 | word-wrap: normal 115 | sup, 116 | sub 117 | font-size: 75% 118 | table 119 | width: 100% 120 | td, 121 | th 122 | border: $content-table-cell-border 123 | border-width: $content-table-cell-border-width 124 | padding: $content-table-cell-padding 125 | vertical-align: top 126 | th 127 | color: $content-table-cell-heading-color 128 | &:not([align]) 129 | text-align: left 130 | thead 131 | td, 132 | th 133 | border-width: $content-table-head-cell-border-width 134 | color: $content-table-head-cell-color 135 | tfoot 136 | td, 137 | th 138 | border-width: $content-table-foot-cell-border-width 139 | color: $content-table-foot-cell-color 140 | tbody 141 | tr 142 | &:last-child 143 | td, 144 | th 145 | border-bottom-width: 0 146 | .tabs 147 | li + li 148 | margin-top: 0 149 | // Sizes 150 | &.is-small 151 | font-size: $size-small 152 | &.is-medium 153 | font-size: $size-medium 154 | &.is-large 155 | font-size: $size-large 156 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/form.sass: -------------------------------------------------------------------------------- 1 | @warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead." 2 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/icon.sass: -------------------------------------------------------------------------------- 1 | $icon-dimensions: 1.5rem !default 2 | $icon-dimensions-small: 1rem !default 3 | $icon-dimensions-medium: 2rem !default 4 | $icon-dimensions-large: 3rem !default 5 | 6 | .icon 7 | align-items: center 8 | display: inline-flex 9 | justify-content: center 10 | height: $icon-dimensions 11 | width: $icon-dimensions 12 | // Sizes 13 | &.is-small 14 | height: $icon-dimensions-small 15 | width: $icon-dimensions-small 16 | &.is-medium 17 | height: $icon-dimensions-medium 18 | width: $icon-dimensions-medium 19 | &.is-large 20 | height: $icon-dimensions-large 21 | width: $icon-dimensions-large 22 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/image.sass: -------------------------------------------------------------------------------- 1 | $dimensions: 16 24 32 48 64 96 128 !default 2 | 3 | .image 4 | display: block 5 | position: relative 6 | img 7 | display: block 8 | height: auto 9 | width: 100% 10 | &.is-rounded 11 | border-radius: $radius-rounded 12 | &.is-fullwidth 13 | width: 100% 14 | // Ratio 15 | &.is-square, 16 | &.is-1by1, 17 | &.is-5by4, 18 | &.is-4by3, 19 | &.is-3by2, 20 | &.is-5by3, 21 | &.is-16by9, 22 | &.is-2by1, 23 | &.is-3by1, 24 | &.is-4by5, 25 | &.is-3by4, 26 | &.is-2by3, 27 | &.is-3by5, 28 | &.is-9by16, 29 | &.is-1by2, 30 | &.is-1by3 31 | img, 32 | .has-ratio 33 | @extend %overlay 34 | height: 100% 35 | width: 100% 36 | &.is-square, 37 | &.is-1by1 38 | padding-top: 100% 39 | &.is-5by4 40 | padding-top: 80% 41 | &.is-4by3 42 | padding-top: 75% 43 | &.is-3by2 44 | padding-top: 66.6666% 45 | &.is-5by3 46 | padding-top: 60% 47 | &.is-16by9 48 | padding-top: 56.25% 49 | &.is-2by1 50 | padding-top: 50% 51 | &.is-3by1 52 | padding-top: 33.3333% 53 | &.is-4by5 54 | padding-top: 125% 55 | &.is-3by4 56 | padding-top: 133.3333% 57 | &.is-2by3 58 | padding-top: 150% 59 | &.is-3by5 60 | padding-top: 166.6666% 61 | &.is-9by16 62 | padding-top: 177.7777% 63 | &.is-1by2 64 | padding-top: 200% 65 | &.is-1by3 66 | padding-top: 300% 67 | // Sizes 68 | @each $dimension in $dimensions 69 | &.is-#{$dimension}x#{$dimension} 70 | height: $dimension * 1px 71 | width: $dimension * 1px 72 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/notification.sass: -------------------------------------------------------------------------------- 1 | $notification-background-color: $background !default 2 | $notification-code-background-color: $scheme-main !default 3 | $notification-radius: $radius !default 4 | $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default 5 | 6 | .notification 7 | @extend %block 8 | background-color: $notification-background-color 9 | border-radius: $notification-radius 10 | padding: $notification-padding 11 | position: relative 12 | a:not(.button):not(.dropdown-item) 13 | color: currentColor 14 | text-decoration: underline 15 | strong 16 | color: currentColor 17 | code, 18 | pre 19 | background: $notification-code-background-color 20 | pre code 21 | background: transparent 22 | & > .delete 23 | position: absolute 24 | right: 0.5rem 25 | top: 0.5rem 26 | .title, 27 | .subtitle, 28 | .content 29 | color: currentColor 30 | // Colors 31 | @each $name, $pair in $colors 32 | $color: nth($pair, 1) 33 | $color-invert: nth($pair, 2) 34 | &.is-#{$name} 35 | background-color: $color 36 | color: $color-invert 37 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/other.sass: -------------------------------------------------------------------------------- 1 | .block 2 | @extend %block 3 | 4 | .delete 5 | @extend %delete 6 | 7 | .heading 8 | display: block 9 | font-size: 11px 10 | letter-spacing: 1px 11 | margin-bottom: 5px 12 | text-transform: uppercase 13 | 14 | .highlight 15 | @extend %block 16 | font-weight: $weight-normal 17 | max-width: 100% 18 | overflow: hidden 19 | padding: 0 20 | pre 21 | overflow: auto 22 | max-width: 100% 23 | 24 | .loader 25 | @extend %loader 26 | 27 | .number 28 | align-items: center 29 | background-color: $background 30 | border-radius: $radius-rounded 31 | display: inline-flex 32 | font-size: $size-medium 33 | height: 2em 34 | justify-content: center 35 | margin-right: 1.5rem 36 | min-width: 2.5em 37 | padding: 0.25rem 0.5rem 38 | text-align: center 39 | vertical-align: top 40 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/progress.sass: -------------------------------------------------------------------------------- 1 | $progress-bar-background-color: $border-light !default 2 | $progress-value-background-color: $text !default 3 | $progress-border-radius: $radius-rounded !default 4 | 5 | $progress-indeterminate-duration: 1.5s !default 6 | 7 | .progress 8 | @extend %block 9 | -moz-appearance: none 10 | -webkit-appearance: none 11 | border: none 12 | border-radius: $progress-border-radius 13 | display: block 14 | height: $size-normal 15 | overflow: hidden 16 | padding: 0 17 | width: 100% 18 | &::-webkit-progress-bar 19 | background-color: $progress-bar-background-color 20 | &::-webkit-progress-value 21 | background-color: $progress-value-background-color 22 | &::-moz-progress-bar 23 | background-color: $progress-value-background-color 24 | &::-ms-fill 25 | background-color: $progress-value-background-color 26 | border: none 27 | // Colors 28 | @each $name, $pair in $colors 29 | $color: nth($pair, 1) 30 | &.is-#{$name} 31 | &::-webkit-progress-value 32 | background-color: $color 33 | &::-moz-progress-bar 34 | background-color: $color 35 | &::-ms-fill 36 | background-color: $color 37 | &:indeterminate 38 | background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) 39 | 40 | &:indeterminate 41 | animation-duration: $progress-indeterminate-duration 42 | animation-iteration-count: infinite 43 | animation-name: moveIndeterminate 44 | animation-timing-function: linear 45 | background-color: $progress-bar-background-color 46 | background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) 47 | background-position: top left 48 | background-repeat: no-repeat 49 | background-size: 150% 150% 50 | &::-webkit-progress-bar 51 | background-color: transparent 52 | &::-moz-progress-bar 53 | background-color: transparent 54 | 55 | // Sizes 56 | &.is-small 57 | height: $size-small 58 | &.is-medium 59 | height: $size-medium 60 | &.is-large 61 | height: $size-large 62 | 63 | @keyframes moveIndeterminate 64 | from 65 | background-position: 200% 0 66 | to 67 | background-position: -200% 0 68 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/table.sass: -------------------------------------------------------------------------------- 1 | $table-color: $text-strong !default 2 | $table-background-color: $scheme-main !default 3 | 4 | $table-cell-border: 1px solid $border !default 5 | $table-cell-border-width: 0 0 1px !default 6 | $table-cell-padding: 0.5em 0.75em !default 7 | $table-cell-heading-color: $text-strong !default 8 | 9 | $table-head-cell-border-width: 0 0 2px !default 10 | $table-head-cell-color: $text-strong !default 11 | $table-foot-cell-border-width: 2px 0 0 !default 12 | $table-foot-cell-color: $text-strong !default 13 | 14 | $table-head-background-color: transparent !default 15 | $table-body-background-color: transparent !default 16 | $table-foot-background-color: transparent !default 17 | 18 | $table-row-hover-background-color: $scheme-main-bis !default 19 | 20 | $table-row-active-background-color: $primary !default 21 | $table-row-active-color: $primary-invert !default 22 | 23 | $table-striped-row-even-background-color: $scheme-main-bis !default 24 | $table-striped-row-even-hover-background-color: $scheme-main-ter !default 25 | 26 | .table 27 | @extend %block 28 | background-color: $table-background-color 29 | color: $table-color 30 | td, 31 | th 32 | border: $table-cell-border 33 | border-width: $table-cell-border-width 34 | padding: $table-cell-padding 35 | vertical-align: top 36 | // Colors 37 | @each $name, $pair in $colors 38 | $color: nth($pair, 1) 39 | $color-invert: nth($pair, 2) 40 | &.is-#{$name} 41 | background-color: $color 42 | border-color: $color 43 | color: $color-invert 44 | // Modifiers 45 | &.is-narrow 46 | white-space: nowrap 47 | width: 1% 48 | &.is-selected 49 | background-color: $table-row-active-background-color 50 | color: $table-row-active-color 51 | a, 52 | strong 53 | color: currentColor 54 | th 55 | color: $table-cell-heading-color 56 | &:not([align]) 57 | text-align: left 58 | tr 59 | &.is-selected 60 | background-color: $table-row-active-background-color 61 | color: $table-row-active-color 62 | a, 63 | strong 64 | color: currentColor 65 | td, 66 | th 67 | border-color: $table-row-active-color 68 | color: currentColor 69 | thead 70 | background-color: $table-head-background-color 71 | td, 72 | th 73 | border-width: $table-head-cell-border-width 74 | color: $table-head-cell-color 75 | tfoot 76 | background-color: $table-foot-background-color 77 | td, 78 | th 79 | border-width: $table-foot-cell-border-width 80 | color: $table-foot-cell-color 81 | tbody 82 | background-color: $table-body-background-color 83 | tr 84 | &:last-child 85 | td, 86 | th 87 | border-bottom-width: 0 88 | // Modifiers 89 | &.is-bordered 90 | td, 91 | th 92 | border-width: 1px 93 | tr 94 | &:last-child 95 | td, 96 | th 97 | border-bottom-width: 1px 98 | &.is-fullwidth 99 | width: 100% 100 | &.is-hoverable 101 | tbody 102 | tr:not(.is-selected) 103 | &:hover 104 | background-color: $table-row-hover-background-color 105 | &.is-striped 106 | tbody 107 | tr:not(.is-selected) 108 | &:hover 109 | background-color: $table-row-hover-background-color 110 | &:nth-child(even) 111 | background-color: $table-striped-row-even-hover-background-color 112 | &.is-narrow 113 | td, 114 | th 115 | padding: 0.25em 0.5em 116 | &.is-striped 117 | tbody 118 | tr:not(.is-selected) 119 | &:nth-child(even) 120 | background-color: $table-striped-row-even-background-color 121 | 122 | .table-container 123 | @extend %block 124 | +overflow-touch 125 | overflow: auto 126 | overflow-y: hidden 127 | max-width: 100% 128 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/tag.sass: -------------------------------------------------------------------------------- 1 | $tag-background-color: $background !default 2 | $tag-color: $text !default 3 | $tag-radius: $radius !default 4 | $tag-delete-margin: 1px !default 5 | 6 | .tags 7 | align-items: center 8 | display: flex 9 | flex-wrap: wrap 10 | justify-content: flex-start 11 | .tag 12 | margin-bottom: 0.5rem 13 | &:not(:last-child) 14 | margin-right: 0.5rem 15 | &:last-child 16 | margin-bottom: -0.5rem 17 | &:not(:last-child) 18 | margin-bottom: 1rem 19 | // Sizes 20 | &.are-medium 21 | .tag:not(.is-normal):not(.is-large) 22 | font-size: $size-normal 23 | &.are-large 24 | .tag:not(.is-normal):not(.is-medium) 25 | font-size: $size-medium 26 | &.is-centered 27 | justify-content: center 28 | .tag 29 | margin-right: 0.25rem 30 | margin-left: 0.25rem 31 | &.is-right 32 | justify-content: flex-end 33 | .tag 34 | &:not(:first-child) 35 | margin-left: 0.5rem 36 | &:not(:last-child) 37 | margin-right: 0 38 | &.has-addons 39 | .tag 40 | margin-right: 0 41 | &:not(:first-child) 42 | margin-left: 0 43 | border-bottom-left-radius: 0 44 | border-top-left-radius: 0 45 | &:not(:last-child) 46 | border-bottom-right-radius: 0 47 | border-top-right-radius: 0 48 | 49 | .tag:not(body) 50 | align-items: center 51 | background-color: $tag-background-color 52 | border-radius: $tag-radius 53 | color: $tag-color 54 | display: inline-flex 55 | font-size: $size-small 56 | height: 2em 57 | justify-content: center 58 | line-height: 1.5 59 | padding-left: 0.75em 60 | padding-right: 0.75em 61 | white-space: nowrap 62 | .delete 63 | margin-left: 0.25rem 64 | margin-right: -0.375rem 65 | // Colors 66 | @each $name, $pair in $colors 67 | $color: nth($pair, 1) 68 | $color-invert: nth($pair, 2) 69 | &.is-#{$name} 70 | background-color: $color 71 | color: $color-invert 72 | // If a light and dark colors are provided 73 | @if length($pair) > 3 74 | $color-light: nth($pair, 3) 75 | $color-dark: nth($pair, 4) 76 | &.is-light 77 | background-color: $color-light 78 | color: $color-dark 79 | // Sizes 80 | &.is-normal 81 | font-size: $size-small 82 | &.is-medium 83 | font-size: $size-normal 84 | &.is-large 85 | font-size: $size-medium 86 | .icon 87 | &:first-child:not(:last-child) 88 | margin-left: -0.375em 89 | margin-right: 0.1875em 90 | &:last-child:not(:first-child) 91 | margin-left: 0.1875em 92 | margin-right: -0.375em 93 | &:first-child:last-child 94 | margin-left: -0.375em 95 | margin-right: -0.375em 96 | // Modifiers 97 | &.is-delete 98 | margin-left: $tag-delete-margin 99 | padding: 0 100 | position: relative 101 | width: 2em 102 | &::before, 103 | &::after 104 | background-color: currentColor 105 | content: "" 106 | display: block 107 | left: 50% 108 | position: absolute 109 | top: 50% 110 | transform: translateX(-50%) translateY(-50%) rotate(45deg) 111 | transform-origin: center center 112 | &::before 113 | height: 1px 114 | width: 50% 115 | &::after 116 | height: 50% 117 | width: 1px 118 | &:hover, 119 | &:focus 120 | background-color: darken($tag-background-color, 5%) 121 | &:active 122 | background-color: darken($tag-background-color, 10%) 123 | &.is-rounded 124 | border-radius: $radius-rounded 125 | 126 | a.tag 127 | &:hover 128 | text-decoration: underline 129 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/elements/title.sass: -------------------------------------------------------------------------------- 1 | $title-color: $text-strong !default 2 | $title-family: false !default 3 | $title-size: $size-3 !default 4 | $title-weight: $weight-semibold !default 5 | $title-line-height: 1.125 !default 6 | $title-strong-color: inherit !default 7 | $title-strong-weight: inherit !default 8 | $title-sub-size: 0.75em !default 9 | $title-sup-size: 0.75em !default 10 | 11 | $subtitle-color: $text !default 12 | $subtitle-family: false !default 13 | $subtitle-size: $size-5 !default 14 | $subtitle-weight: $weight-normal !default 15 | $subtitle-line-height: 1.25 !default 16 | $subtitle-strong-color: $text-strong !default 17 | $subtitle-strong-weight: $weight-semibold !default 18 | $subtitle-negative-margin: -1.25rem !default 19 | 20 | .title, 21 | .subtitle 22 | @extend %block 23 | word-break: break-word 24 | em, 25 | span 26 | font-weight: inherit 27 | sub 28 | font-size: $title-sub-size 29 | sup 30 | font-size: $title-sup-size 31 | .tag 32 | vertical-align: middle 33 | 34 | .title 35 | color: $title-color 36 | @if $title-family 37 | font-family: $title-family 38 | font-size: $title-size 39 | font-weight: $title-weight 40 | line-height: $title-line-height 41 | strong 42 | color: $title-strong-color 43 | font-weight: $title-strong-weight 44 | & + .highlight 45 | margin-top: -0.75rem 46 | &:not(.is-spaced) + .subtitle 47 | margin-top: $subtitle-negative-margin 48 | // Sizes 49 | @each $size in $sizes 50 | $i: index($sizes, $size) 51 | &.is-#{$i} 52 | font-size: $size 53 | 54 | .subtitle 55 | color: $subtitle-color 56 | @if $subtitle-family 57 | font-family: $subtitle-family 58 | font-size: $subtitle-size 59 | font-weight: $subtitle-weight 60 | line-height: $subtitle-line-height 61 | strong 62 | color: $subtitle-strong-color 63 | font-weight: $subtitle-strong-weight 64 | &:not(.is-spaced) + .title 65 | margin-top: $subtitle-negative-margin 66 | // Sizes 67 | @each $size in $sizes 68 | $i: index($sizes, $size) 69 | &.is-#{$i} 70 | font-size: $size 71 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/form/_all.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "shared.sass" 4 | @import "input-textarea.sass" 5 | @import "checkbox-radio.sass" 6 | @import "select.sass" 7 | @import "file.sass" 8 | @import "tools.sass" 9 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/form/checkbox-radio.sass: -------------------------------------------------------------------------------- 1 | %checkbox-radio 2 | cursor: pointer 3 | display: inline-block 4 | line-height: 1.25 5 | position: relative 6 | input 7 | cursor: pointer 8 | &:hover 9 | color: $input-hover-color 10 | &[disabled], 11 | fieldset[disabled] & 12 | color: $input-disabled-color 13 | cursor: not-allowed 14 | 15 | .checkbox 16 | @extend %checkbox-radio 17 | 18 | .radio 19 | @extend %checkbox-radio 20 | & + .radio 21 | margin-left: 0.5em 22 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/form/file.sass: -------------------------------------------------------------------------------- 1 | $file-border-color: $border !default 2 | $file-radius: $radius !default 3 | 4 | $file-cta-background-color: $scheme-main-ter !default 5 | $file-cta-color: $text !default 6 | $file-cta-hover-color: $text-strong !default 7 | $file-cta-active-color: $text-strong !default 8 | 9 | $file-name-border-color: $border !default 10 | $file-name-border-style: solid !default 11 | $file-name-border-width: 1px 1px 1px 0 !default 12 | $file-name-max-width: 16em !default 13 | 14 | .file 15 | @extend %unselectable 16 | align-items: stretch 17 | display: flex 18 | justify-content: flex-start 19 | position: relative 20 | // Colors 21 | @each $name, $pair in $colors 22 | $color: nth($pair, 1) 23 | $color-invert: nth($pair, 2) 24 | &.is-#{$name} 25 | .file-cta 26 | background-color: $color 27 | border-color: transparent 28 | color: $color-invert 29 | &:hover, 30 | &.is-hovered 31 | .file-cta 32 | background-color: darken($color, 2.5%) 33 | border-color: transparent 34 | color: $color-invert 35 | &:focus, 36 | &.is-focused 37 | .file-cta 38 | border-color: transparent 39 | box-shadow: 0 0 0.5em rgba($color, 0.25) 40 | color: $color-invert 41 | &:active, 42 | &.is-active 43 | .file-cta 44 | background-color: darken($color, 5%) 45 | border-color: transparent 46 | color: $color-invert 47 | // Sizes 48 | &.is-small 49 | font-size: $size-small 50 | &.is-medium 51 | font-size: $size-medium 52 | .file-icon 53 | .fa 54 | font-size: 21px 55 | &.is-large 56 | font-size: $size-large 57 | .file-icon 58 | .fa 59 | font-size: 28px 60 | // Modifiers 61 | &.has-name 62 | .file-cta 63 | border-bottom-right-radius: 0 64 | border-top-right-radius: 0 65 | .file-name 66 | border-bottom-left-radius: 0 67 | border-top-left-radius: 0 68 | &.is-empty 69 | .file-cta 70 | border-radius: $file-radius 71 | .file-name 72 | display: none 73 | &.is-boxed 74 | .file-label 75 | flex-direction: column 76 | .file-cta 77 | flex-direction: column 78 | height: auto 79 | padding: 1em 3em 80 | .file-name 81 | border-width: 0 1px 1px 82 | .file-icon 83 | height: 1.5em 84 | width: 1.5em 85 | .fa 86 | font-size: 21px 87 | &.is-small 88 | .file-icon .fa 89 | font-size: 14px 90 | &.is-medium 91 | .file-icon .fa 92 | font-size: 28px 93 | &.is-large 94 | .file-icon .fa 95 | font-size: 35px 96 | &.has-name 97 | .file-cta 98 | border-radius: $file-radius $file-radius 0 0 99 | .file-name 100 | border-radius: 0 0 $file-radius $file-radius 101 | border-width: 0 1px 1px 102 | &.is-centered 103 | justify-content: center 104 | &.is-fullwidth 105 | .file-label 106 | width: 100% 107 | .file-name 108 | flex-grow: 1 109 | max-width: none 110 | &.is-right 111 | justify-content: flex-end 112 | .file-cta 113 | border-radius: 0 $file-radius $file-radius 0 114 | .file-name 115 | border-radius: $file-radius 0 0 $file-radius 116 | border-width: 1px 0 1px 1px 117 | order: -1 118 | 119 | .file-label 120 | align-items: stretch 121 | display: flex 122 | cursor: pointer 123 | justify-content: flex-start 124 | overflow: hidden 125 | position: relative 126 | &:hover 127 | .file-cta 128 | background-color: darken($file-cta-background-color, 2.5%) 129 | color: $file-cta-hover-color 130 | .file-name 131 | border-color: darken($file-name-border-color, 2.5%) 132 | &:active 133 | .file-cta 134 | background-color: darken($file-cta-background-color, 5%) 135 | color: $file-cta-active-color 136 | .file-name 137 | border-color: darken($file-name-border-color, 5%) 138 | 139 | .file-input 140 | height: 100% 141 | left: 0 142 | opacity: 0 143 | outline: none 144 | position: absolute 145 | top: 0 146 | width: 100% 147 | 148 | .file-cta, 149 | .file-name 150 | @extend %control 151 | border-color: $file-border-color 152 | border-radius: $file-radius 153 | font-size: 1em 154 | padding-left: 1em 155 | padding-right: 1em 156 | white-space: nowrap 157 | 158 | .file-cta 159 | background-color: $file-cta-background-color 160 | color: $file-cta-color 161 | 162 | .file-name 163 | border-color: $file-name-border-color 164 | border-style: $file-name-border-style 165 | border-width: $file-name-border-width 166 | display: block 167 | max-width: $file-name-max-width 168 | overflow: hidden 169 | text-align: left 170 | text-overflow: ellipsis 171 | 172 | .file-icon 173 | align-items: center 174 | display: flex 175 | height: 1em 176 | justify-content: center 177 | margin-right: 0.5em 178 | width: 1em 179 | .fa 180 | font-size: 14px 181 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/form/input-textarea.sass: -------------------------------------------------------------------------------- 1 | $textarea-padding: $control-padding-horizontal !default 2 | $textarea-max-height: 40em !default 3 | $textarea-min-height: 8em !default 4 | 5 | %input-textarea 6 | @extend %input 7 | box-shadow: $input-shadow 8 | max-width: 100% 9 | width: 100% 10 | &[readonly] 11 | box-shadow: none 12 | // Colors 13 | @each $name, $pair in $colors 14 | $color: nth($pair, 1) 15 | &.is-#{$name} 16 | border-color: $color 17 | &:focus, 18 | &.is-focused, 19 | &:active, 20 | &.is-active 21 | box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) 22 | // Sizes 23 | &.is-small 24 | +control-small 25 | &.is-medium 26 | +control-medium 27 | &.is-large 28 | +control-large 29 | // Modifiers 30 | &.is-fullwidth 31 | display: block 32 | width: 100% 33 | &.is-inline 34 | display: inline 35 | width: auto 36 | 37 | .input 38 | @extend %input-textarea 39 | &.is-rounded 40 | border-radius: $radius-rounded 41 | padding-left: calc(#{$control-padding-horizontal} + 0.375em) 42 | padding-right: calc(#{$control-padding-horizontal} + 0.375em) 43 | &.is-static 44 | background-color: transparent 45 | border-color: transparent 46 | box-shadow: none 47 | padding-left: 0 48 | padding-right: 0 49 | 50 | .textarea 51 | @extend %input-textarea 52 | display: block 53 | max-width: 100% 54 | min-width: 100% 55 | padding: $textarea-padding 56 | resize: vertical 57 | &:not([rows]) 58 | max-height: $textarea-max-height 59 | min-height: $textarea-min-height 60 | &[rows] 61 | height: initial 62 | // Modifiers 63 | &.has-fixed-size 64 | resize: none 65 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/form/select.sass: -------------------------------------------------------------------------------- 1 | .select 2 | display: inline-block 3 | max-width: 100% 4 | position: relative 5 | vertical-align: top 6 | &:not(.is-multiple) 7 | height: $input-height 8 | &:not(.is-multiple):not(.is-loading) 9 | &::after 10 | @extend %arrow 11 | border-color: $input-arrow 12 | right: 1.125em 13 | z-index: 4 14 | &.is-rounded 15 | select 16 | border-radius: $radius-rounded 17 | padding-left: 1em 18 | select 19 | @extend %input 20 | cursor: pointer 21 | display: block 22 | font-size: 1em 23 | max-width: 100% 24 | outline: none 25 | &::-ms-expand 26 | display: none 27 | &[disabled]:hover, 28 | fieldset[disabled] &:hover 29 | border-color: $input-disabled-border-color 30 | &:not([multiple]) 31 | padding-right: 2.5em 32 | &[multiple] 33 | height: auto 34 | padding: 0 35 | option 36 | padding: 0.5em 1em 37 | // States 38 | &:not(.is-multiple):not(.is-loading):hover 39 | &::after 40 | border-color: $input-hover-color 41 | // Colors 42 | @each $name, $pair in $colors 43 | $color: nth($pair, 1) 44 | &.is-#{$name} 45 | &:not(:hover)::after 46 | border-color: $color 47 | select 48 | border-color: $color 49 | &:hover, 50 | &.is-hovered 51 | border-color: darken($color, 5%) 52 | &:focus, 53 | &.is-focused, 54 | &:active, 55 | &.is-active 56 | box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) 57 | // Sizes 58 | &.is-small 59 | +control-small 60 | &.is-medium 61 | +control-medium 62 | &.is-large 63 | +control-large 64 | // Modifiers 65 | &.is-disabled 66 | &::after 67 | border-color: $input-disabled-color 68 | &.is-fullwidth 69 | width: 100% 70 | select 71 | width: 100% 72 | &.is-loading 73 | &::after 74 | @extend %loader 75 | margin-top: 0 76 | position: absolute 77 | right: 0.625em 78 | top: 0.625em 79 | transform: none 80 | &.is-small:after 81 | font-size: $size-small 82 | &.is-medium:after 83 | font-size: $size-medium 84 | &.is-large:after 85 | font-size: $size-large 86 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/form/shared.sass: -------------------------------------------------------------------------------- 1 | $input-color: $text-strong !default 2 | $input-background-color: $scheme-main !default 3 | $input-border-color: $border !default 4 | $input-height: $control-height !default 5 | $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default 6 | $input-placeholder-color: rgba($input-color, 0.3) !default 7 | 8 | $input-hover-color: $text-strong !default 9 | $input-hover-border-color: $border-hover !default 10 | 11 | $input-focus-color: $text-strong !default 12 | $input-focus-border-color: $link !default 13 | $input-focus-box-shadow-size: 0 0 0 0.125em !default 14 | $input-focus-box-shadow-color: rgba($link, 0.25) !default 15 | 16 | $input-disabled-color: $text-light !default 17 | $input-disabled-background-color: $background !default 18 | $input-disabled-border-color: $background !default 19 | $input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default 20 | 21 | $input-arrow: $link !default 22 | 23 | $input-icon-color: $border !default 24 | $input-icon-active-color: $text !default 25 | 26 | $input-radius: $radius !default 27 | 28 | =input 29 | @extend %control 30 | background-color: $input-background-color 31 | border-color: $input-border-color 32 | border-radius: $input-radius 33 | color: $input-color 34 | +placeholder 35 | color: $input-placeholder-color 36 | &:hover, 37 | &.is-hovered 38 | border-color: $input-hover-border-color 39 | &:focus, 40 | &.is-focused, 41 | &:active, 42 | &.is-active 43 | border-color: $input-focus-border-color 44 | box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color 45 | &[disabled], 46 | fieldset[disabled] & 47 | background-color: $input-disabled-background-color 48 | border-color: $input-disabled-border-color 49 | box-shadow: none 50 | color: $input-disabled-color 51 | +placeholder 52 | color: $input-disabled-placeholder-color 53 | 54 | %input 55 | +input 56 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/form/tools.sass: -------------------------------------------------------------------------------- 1 | $label-color: $text-strong !default 2 | $label-weight: $weight-bold !default 3 | 4 | $help-size: $size-small !default 5 | 6 | .label 7 | color: $label-color 8 | display: block 9 | font-size: $size-normal 10 | font-weight: $label-weight 11 | &:not(:last-child) 12 | margin-bottom: 0.5em 13 | // Sizes 14 | &.is-small 15 | font-size: $size-small 16 | &.is-medium 17 | font-size: $size-medium 18 | &.is-large 19 | font-size: $size-large 20 | 21 | .help 22 | display: block 23 | font-size: $help-size 24 | margin-top: 0.25rem 25 | @each $name, $pair in $colors 26 | $color: nth($pair, 1) 27 | &.is-#{$name} 28 | color: $color 29 | 30 | // Containers 31 | 32 | .field 33 | &:not(:last-child) 34 | margin-bottom: 0.75rem 35 | // Modifiers 36 | &.has-addons 37 | display: flex 38 | justify-content: flex-start 39 | .control 40 | &:not(:last-child) 41 | margin-right: -1px 42 | &:not(:first-child):not(:last-child) 43 | .button, 44 | .input, 45 | .select select 46 | border-radius: 0 47 | &:first-child:not(:only-child) 48 | .button, 49 | .input, 50 | .select select 51 | border-bottom-right-radius: 0 52 | border-top-right-radius: 0 53 | &:last-child:not(:only-child) 54 | .button, 55 | .input, 56 | .select select 57 | border-bottom-left-radius: 0 58 | border-top-left-radius: 0 59 | .button, 60 | .input, 61 | .select select 62 | &:not([disabled]) 63 | &:hover, 64 | &.is-hovered 65 | z-index: 2 66 | &:focus, 67 | &.is-focused, 68 | &:active, 69 | &.is-active 70 | z-index: 3 71 | &:hover 72 | z-index: 4 73 | &.is-expanded 74 | flex-grow: 1 75 | flex-shrink: 1 76 | &.has-addons-centered 77 | justify-content: center 78 | &.has-addons-right 79 | justify-content: flex-end 80 | &.has-addons-fullwidth 81 | .control 82 | flex-grow: 1 83 | flex-shrink: 0 84 | &.is-grouped 85 | display: flex 86 | justify-content: flex-start 87 | & > .control 88 | flex-shrink: 0 89 | &:not(:last-child) 90 | margin-bottom: 0 91 | margin-right: 0.75rem 92 | &.is-expanded 93 | flex-grow: 1 94 | flex-shrink: 1 95 | &.is-grouped-centered 96 | justify-content: center 97 | &.is-grouped-right 98 | justify-content: flex-end 99 | &.is-grouped-multiline 100 | flex-wrap: wrap 101 | & > .control 102 | &:last-child, 103 | &:not(:last-child) 104 | margin-bottom: 0.75rem 105 | &:last-child 106 | margin-bottom: -0.75rem 107 | &:not(:last-child) 108 | margin-bottom: 0 109 | &.is-horizontal 110 | +tablet 111 | display: flex 112 | 113 | .field-label 114 | .label 115 | font-size: inherit 116 | +mobile 117 | margin-bottom: 0.5rem 118 | +tablet 119 | flex-basis: 0 120 | flex-grow: 1 121 | flex-shrink: 0 122 | margin-right: 1.5rem 123 | text-align: right 124 | &.is-small 125 | font-size: $size-small 126 | padding-top: 0.375em 127 | &.is-normal 128 | padding-top: 0.375em 129 | &.is-medium 130 | font-size: $size-medium 131 | padding-top: 0.375em 132 | &.is-large 133 | font-size: $size-large 134 | padding-top: 0.375em 135 | 136 | .field-body 137 | .field .field 138 | margin-bottom: 0 139 | +tablet 140 | display: flex 141 | flex-basis: 0 142 | flex-grow: 5 143 | flex-shrink: 1 144 | .field 145 | margin-bottom: 0 146 | & > .field 147 | flex-shrink: 1 148 | &:not(.is-narrow) 149 | flex-grow: 1 150 | &:not(:last-child) 151 | margin-right: 0.75rem 152 | 153 | .control 154 | box-sizing: border-box 155 | clear: both 156 | font-size: $size-normal 157 | position: relative 158 | text-align: left 159 | // Modifiers 160 | &.has-icons-left, 161 | &.has-icons-right 162 | .input, 163 | .select 164 | &:focus 165 | & ~ .icon 166 | color: $input-icon-active-color 167 | &.is-small ~ .icon 168 | font-size: $size-small 169 | &.is-medium ~ .icon 170 | font-size: $size-medium 171 | &.is-large ~ .icon 172 | font-size: $size-large 173 | .icon 174 | color: $input-icon-color 175 | height: $input-height 176 | pointer-events: none 177 | position: absolute 178 | top: 0 179 | width: $input-height 180 | z-index: 4 181 | &.has-icons-left 182 | .input, 183 | .select select 184 | padding-left: $input-height 185 | .icon.is-left 186 | left: 0 187 | &.has-icons-right 188 | .input, 189 | .select select 190 | padding-right: $input-height 191 | .icon.is-right 192 | right: 0 193 | &.is-loading 194 | &::after 195 | @extend %loader 196 | position: absolute !important 197 | right: 0.625em 198 | top: 0.625em 199 | z-index: 4 200 | &.is-small:after 201 | font-size: $size-small 202 | &.is-medium:after 203 | font-size: $size-medium 204 | &.is-large:after 205 | font-size: $size-large 206 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/grid/_all.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "columns.sass" 4 | @import "tiles.sass" 5 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/grid/tiles.sass: -------------------------------------------------------------------------------- 1 | $tile-spacing: 0.75rem !default 2 | 3 | .tile 4 | align-items: stretch 5 | display: block 6 | flex-basis: 0 7 | flex-grow: 1 8 | flex-shrink: 1 9 | min-height: min-content 10 | // Modifiers 11 | &.is-ancestor 12 | margin-left: $tile-spacing * -1 13 | margin-right: $tile-spacing * -1 14 | margin-top: $tile-spacing * -1 15 | &:last-child 16 | margin-bottom: $tile-spacing * -1 17 | &:not(:last-child) 18 | margin-bottom: $tile-spacing 19 | &.is-child 20 | margin: 0 !important 21 | &.is-parent 22 | padding: $tile-spacing 23 | &.is-vertical 24 | flex-direction: column 25 | & > .tile.is-child:not(:last-child) 26 | margin-bottom: 1.5rem !important 27 | // Responsiveness 28 | +tablet 29 | &:not(.is-child) 30 | display: flex 31 | @for $i from 1 through 12 32 | &.is-#{$i} 33 | flex: none 34 | width: ($i / 12) * 100% 35 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/layout/_all.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "hero.sass" 4 | @import "section.sass" 5 | @import "footer.sass" 6 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/layout/footer.sass: -------------------------------------------------------------------------------- 1 | $footer-background-color: $scheme-main-bis !default 2 | $footer-color: false !default 3 | $footer-padding: 3rem 1.5rem 6rem !default 4 | 5 | .footer 6 | background-color: $footer-background-color 7 | padding: $footer-padding 8 | @if $footer-color 9 | color: $footer-color 10 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/layout/hero.sass: -------------------------------------------------------------------------------- 1 | // Main container 2 | 3 | .hero 4 | align-items: stretch 5 | display: flex 6 | flex-direction: column 7 | justify-content: space-between 8 | .navbar 9 | background: none 10 | .tabs 11 | ul 12 | border-bottom: none 13 | // Colors 14 | @each $name, $pair in $colors 15 | $color: nth($pair, 1) 16 | $color-invert: nth($pair, 2) 17 | &.is-#{$name} 18 | background-color: $color 19 | color: $color-invert 20 | a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), 21 | strong 22 | color: inherit 23 | .title 24 | color: $color-invert 25 | .subtitle 26 | color: rgba($color-invert, 0.9) 27 | a:not(.button), 28 | strong 29 | color: $color-invert 30 | .navbar-menu 31 | +touch 32 | background-color: $color 33 | .navbar-item, 34 | .navbar-link 35 | color: rgba($color-invert, 0.7) 36 | a.navbar-item, 37 | .navbar-link 38 | &:hover, 39 | &.is-active 40 | background-color: darken($color, 5%) 41 | color: $color-invert 42 | .tabs 43 | a 44 | color: $color-invert 45 | opacity: 0.9 46 | &:hover 47 | opacity: 1 48 | li 49 | &.is-active a 50 | opacity: 1 51 | &.is-boxed, 52 | &.is-toggle 53 | a 54 | color: $color-invert 55 | &:hover 56 | background-color: rgba($scheme-invert, 0.1) 57 | li.is-active a 58 | &, 59 | &:hover 60 | background-color: $color-invert 61 | border-color: $color-invert 62 | color: $color 63 | // Modifiers 64 | &.is-bold 65 | $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) 66 | $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) 67 | background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) 68 | +mobile 69 | .navbar-menu 70 | background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) 71 | // Sizes 72 | &.is-small 73 | .hero-body 74 | padding-bottom: 1.5rem 75 | padding-top: 1.5rem 76 | &.is-medium 77 | +tablet 78 | .hero-body 79 | padding-bottom: 9rem 80 | padding-top: 9rem 81 | &.is-large 82 | +tablet 83 | .hero-body 84 | padding-bottom: 18rem 85 | padding-top: 18rem 86 | &.is-halfheight, 87 | &.is-fullheight, 88 | &.is-fullheight-with-navbar 89 | .hero-body 90 | align-items: center 91 | display: flex 92 | & > .container 93 | flex-grow: 1 94 | flex-shrink: 1 95 | &.is-halfheight 96 | min-height: 50vh 97 | &.is-fullheight 98 | min-height: 100vh 99 | 100 | // Components 101 | 102 | .hero-video 103 | @extend %overlay 104 | overflow: hidden 105 | video 106 | left: 50% 107 | min-height: 100% 108 | min-width: 100% 109 | position: absolute 110 | top: 50% 111 | transform: translate3d(-50%, -50%, 0) 112 | // Modifiers 113 | &.is-transparent 114 | opacity: 0.3 115 | // Responsiveness 116 | +mobile 117 | display: none 118 | 119 | .hero-buttons 120 | margin-top: 1.5rem 121 | // Responsiveness 122 | +mobile 123 | .button 124 | display: flex 125 | &:not(:last-child) 126 | margin-bottom: 0.75rem 127 | +tablet 128 | display: flex 129 | justify-content: center 130 | .button:not(:last-child) 131 | margin-right: 1.5rem 132 | 133 | // Containers 134 | 135 | .hero-head, 136 | .hero-foot 137 | flex-grow: 0 138 | flex-shrink: 0 139 | 140 | .hero-body 141 | flex-grow: 1 142 | flex-shrink: 0 143 | padding: 3rem 1.5rem 144 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/layout/section.sass: -------------------------------------------------------------------------------- 1 | $section-padding: 3rem 1.5rem !default 2 | $section-padding-medium: 9rem 1.5rem !default 3 | $section-padding-large: 18rem 1.5rem !default 4 | 5 | .section 6 | padding: $section-padding 7 | // Responsiveness 8 | +desktop 9 | // Sizes 10 | &.is-medium 11 | padding: $section-padding-medium 12 | &.is-large 13 | padding: $section-padding-large 14 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/utilities/_all.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "initial-variables.sass" 4 | @import "functions.sass" 5 | @import "derived-variables.sass" 6 | @import "animations.sass" 7 | @import "mixins.sass" 8 | @import "controls.sass" 9 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/utilities/animations.sass: -------------------------------------------------------------------------------- 1 | @keyframes spinAround 2 | from 3 | transform: rotate(0deg) 4 | to 5 | transform: rotate(359deg) 6 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/utilities/controls.sass: -------------------------------------------------------------------------------- 1 | $control-radius: $radius !default 2 | $control-radius-small: $radius-small !default 3 | 4 | $control-border-width: 1px !default 5 | 6 | $control-height: 2.5em !default 7 | $control-line-height: 1.5 !default 8 | 9 | $control-padding-vertical: calc(0.5em - #{$control-border-width}) !default 10 | $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default 11 | 12 | =control 13 | -moz-appearance: none 14 | -webkit-appearance: none 15 | align-items: center 16 | border: $control-border-width solid transparent 17 | border-radius: $control-radius 18 | box-shadow: none 19 | display: inline-flex 20 | font-size: $size-normal 21 | height: $control-height 22 | justify-content: flex-start 23 | line-height: $control-line-height 24 | padding-bottom: $control-padding-vertical 25 | padding-left: $control-padding-horizontal 26 | padding-right: $control-padding-horizontal 27 | padding-top: $control-padding-vertical 28 | position: relative 29 | vertical-align: top 30 | // States 31 | &:focus, 32 | &.is-focused, 33 | &:active, 34 | &.is-active 35 | outline: none 36 | &[disabled], 37 | fieldset[disabled] & 38 | cursor: not-allowed 39 | 40 | %control 41 | +control 42 | 43 | // The controls sizes use mixins so they can be used at different breakpoints 44 | =control-small 45 | border-radius: $control-radius-small 46 | font-size: $size-small 47 | =control-medium 48 | font-size: $size-medium 49 | =control-large 50 | font-size: $size-large 51 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/utilities/derived-variables.sass: -------------------------------------------------------------------------------- 1 | $primary: $turquoise !default 2 | 3 | $info: $cyan !default 4 | $success: $green !default 5 | $warning: $yellow !default 6 | $danger: $red !default 7 | 8 | $light: $white-ter !default 9 | $dark: $grey-darker !default 10 | 11 | // Invert colors 12 | 13 | $orange-invert: findColorInvert($orange) !default 14 | $yellow-invert: findColorInvert($yellow) !default 15 | $green-invert: findColorInvert($green) !default 16 | $turquoise-invert: findColorInvert($turquoise) !default 17 | $cyan-invert: findColorInvert($cyan) !default 18 | $blue-invert: findColorInvert($blue) !default 19 | $purple-invert: findColorInvert($purple) !default 20 | $red-invert: findColorInvert($red) !default 21 | 22 | $primary-invert: findColorInvert($primary) !default 23 | $primary-light: findLightColor($primary) !default 24 | $primary-dark: findDarkColor($primary) !default 25 | $info-invert: findColorInvert($info) !default 26 | $info-light: findLightColor($info) !default 27 | $info-dark: findDarkColor($info) !default 28 | $success-invert: findColorInvert($success) !default 29 | $success-light: findLightColor($success) !default 30 | $success-dark: findDarkColor($success) !default 31 | $warning-invert: findColorInvert($warning) !default 32 | $warning-light: findLightColor($warning) !default 33 | $warning-dark: findDarkColor($warning) !default 34 | $danger-invert: findColorInvert($danger) !default 35 | $danger-light: findLightColor($danger) !default 36 | $danger-dark: findDarkColor($danger) !default 37 | $light-invert: findColorInvert($light) !default 38 | $dark-invert: findColorInvert($dark) !default 39 | 40 | // General colors 41 | 42 | $scheme-main: $white !default 43 | $scheme-main-bis: $white-bis !default 44 | $scheme-main-ter: $white-ter !default 45 | $scheme-invert: $black !default 46 | $scheme-invert-bis: $black-bis !default 47 | $scheme-invert-ter: $black-ter !default 48 | 49 | $background: $white-ter !default 50 | 51 | $border: $grey-lighter !default 52 | $border-hover: $grey-light !default 53 | $border-light: $grey-lightest !default 54 | $border-light-hover: $grey-light !default 55 | 56 | // Text colors 57 | 58 | $text: $grey-dark !default 59 | $text-invert: findColorInvert($text) !default 60 | $text-light: $grey !default 61 | $text-strong: $grey-darker !default 62 | 63 | // Code colors 64 | 65 | $code: $red !default 66 | $code-background: $background !default 67 | 68 | $pre: $text !default 69 | $pre-background: $background !default 70 | 71 | // Link colors 72 | 73 | $link: $blue !default 74 | $link-invert: findColorInvert($link) !default 75 | $link-light: findLightColor($link) !default 76 | $link-dark: findDarkColor($link) !default 77 | $link-visited: $purple !default 78 | 79 | $link-hover: $grey-darker !default 80 | $link-hover-border: $grey-light !default 81 | 82 | $link-focus: $grey-darker !default 83 | $link-focus-border: $blue !default 84 | 85 | $link-active: $grey-darker !default 86 | $link-active-border: $grey-dark !default 87 | 88 | // Typography 89 | 90 | $family-primary: $family-sans-serif !default 91 | $family-secondary: $family-sans-serif !default 92 | $family-code: $family-monospace !default 93 | 94 | $size-small: $size-7 !default 95 | $size-normal: $size-6 !default 96 | $size-medium: $size-5 !default 97 | $size-large: $size-4 !default 98 | 99 | // Lists and maps 100 | $custom-colors: null !default 101 | $custom-shades: null !default 102 | 103 | $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default 104 | $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default 105 | 106 | $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default 107 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/utilities/functions.sass: -------------------------------------------------------------------------------- 1 | @function mergeColorMaps($bulma-colors, $custom-colors) 2 | // We return at least Bulma's hard-coded colors 3 | $merged-colors: $bulma-colors 4 | 5 | // We want a map as input 6 | @if type-of($custom-colors) == 'map' 7 | @each $name, $components in $custom-colors 8 | // The color name should be a string 9 | // and the components either a single color 10 | // or a colors list with at least one element 11 | @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1 12 | $color-base: null 13 | $color-invert: null 14 | $color-light: null 15 | $color-dark: null 16 | $value: null 17 | 18 | // The param can either be a single color 19 | // or a list of 2 colors 20 | @if type-of($components) == 'color' 21 | $color-base: $components 22 | $color-invert: findColorInvert($color-base) 23 | $color-light: findLightColor($color-base) 24 | $color-dark: findDarkColor($color-base) 25 | @else if type-of($components) == 'list' 26 | $color-base: nth($components, 1) 27 | // If Invert, Light and Dark are provided 28 | @if length($components) > 3 29 | $color-invert: nth($components, 2) 30 | $color-light: nth($components, 3) 31 | $color-dark: nth($components, 4) 32 | // If only Invert and Light are provided 33 | @else if length($components) > 2 34 | $color-invert: nth($components, 2) 35 | $color-light: nth($components, 3) 36 | $color-dark: findDarkColor($color-base) 37 | // If only Invert is provided 38 | @else 39 | $color-invert: nth($components, 2) 40 | $color-light: findLightColor($color-base) 41 | $color-dark: findDarkColor($color-base) 42 | 43 | $value: ($color-base, $color-invert, $color-light, $color-dark) 44 | 45 | // We only want to merge the map if the color base is an actual color 46 | @if type-of($color-base) == 'color' 47 | // We merge this colors elements as map with Bulma's colors map 48 | // (we can override them this way, no multiple definition for the same name) 49 | // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark))) 50 | $merged-colors: map_merge($merged-colors, ($name: $value)) 51 | 52 | @return $merged-colors 53 | 54 | @function powerNumber($number, $exp) 55 | $value: 1 56 | @if $exp > 0 57 | @for $i from 1 through $exp 58 | $value: $value * $number 59 | @else if $exp < 0 60 | @for $i from 1 through -$exp 61 | $value: $value / $number 62 | @return $value 63 | 64 | @function colorLuminance($color) 65 | $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) 66 | @each $name, $value in $color-rgb 67 | $adjusted: 0 68 | $value: $value / 255 69 | @if $value < 0.03928 70 | $value: $value / 12.92 71 | @else 72 | $value: ($value + .055) / 1.055 73 | $value: powerNumber($value, 2) 74 | $color-rgb: map-merge($color-rgb, ($name: $value)) 75 | @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) 76 | 77 | @function findColorInvert($color) 78 | @if (colorLuminance($color) > 0.55) 79 | @return rgba(#000, 0.7) 80 | @else 81 | @return #fff 82 | 83 | @function findLightColor($color) 84 | @if type-of($color) == 'color' 85 | $l: 96% 86 | @if lightness($color) > 96% 87 | $l: lightness($color) 88 | @return change-color($color, $lightness: $l) 89 | @return $background 90 | 91 | @function findDarkColor($color) 92 | @if type-of($color) == 'color' 93 | $base-l: 29% 94 | $luminance: colorLuminance($color) 95 | $luminance-delta: (0.53 - $luminance) 96 | $target-l: round($base-l + ($luminance-delta * 53)) 97 | @return change-color($color, $lightness: max($base-l, $target-l)) 98 | @return $text-strong 99 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/utilities/initial-variables.sass: -------------------------------------------------------------------------------- 1 | // Colors 2 | 3 | $black: hsl(0, 0%, 4%) !default 4 | $black-bis: hsl(0, 0%, 7%) !default 5 | $black-ter: hsl(0, 0%, 14%) !default 6 | 7 | $grey-darker: hsl(0, 0%, 21%) !default 8 | $grey-dark: hsl(0, 0%, 29%) !default 9 | $grey: hsl(0, 0%, 48%) !default 10 | $grey-light: hsl(0, 0%, 71%) !default 11 | $grey-lighter: hsl(0, 0%, 86%) !default 12 | $grey-lightest: hsl(0, 0%, 93%) !default 13 | 14 | $white-ter: hsl(0, 0%, 96%) !default 15 | $white-bis: hsl(0, 0%, 98%) !default 16 | $white: hsl(0, 0%, 100%) !default 17 | 18 | $orange: hsl(14, 100%, 53%) !default 19 | $yellow: hsl(48, 100%, 67%) !default 20 | $green: hsl(141, 53%, 53%) !default 21 | $turquoise: hsl(171, 100%, 41%) !default 22 | $cyan: hsl(204, 71%, 53%) !default 23 | $blue: hsl(217, 71%, 53%) !default 24 | $purple: hsl(271, 100%, 71%) !default 25 | $red: hsl(348, 86%, 61%) !default 26 | 27 | // Typography 28 | 29 | $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default 30 | $family-monospace: monospace !default 31 | $render-mode: optimizeLegibility !default 32 | 33 | $size-1: 3rem !default 34 | $size-2: 2.5rem !default 35 | $size-3: 2rem !default 36 | $size-4: 1.5rem !default 37 | $size-5: 1.25rem !default 38 | $size-6: 1rem !default 39 | $size-7: 0.75rem !default 40 | 41 | $weight-light: 300 !default 42 | $weight-normal: 400 !default 43 | $weight-medium: 500 !default 44 | $weight-semibold: 600 !default 45 | $weight-bold: 700 !default 46 | 47 | // Spacing 48 | 49 | $block-spacing: 1.5rem !default 50 | 51 | // Responsiveness 52 | 53 | // The container horizontal gap, which acts as the offset for breakpoints 54 | $gap: 32px !default 55 | // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 56 | $tablet: 769px !default 57 | // 960px container + 4rem 58 | $desktop: 960px + (2 * $gap) !default 59 | // 1152px container + 4rem 60 | $widescreen: 1152px + (2 * $gap) !default 61 | $widescreen-enabled: true !default 62 | // 1344px container + 4rem 63 | $fullhd: 1344px + (2 * $gap) !default 64 | $fullhd-enabled: true !default 65 | 66 | // Miscellaneous 67 | 68 | $easing: ease-out !default 69 | $radius-small: 2px !default 70 | $radius: 4px !default 71 | $radius-large: 6px !default 72 | $radius-rounded: 290486px !default 73 | $speed: 86ms !default 74 | 75 | // Flags 76 | 77 | $variable-columns: true !default 78 | -------------------------------------------------------------------------------- /_sass/bulma-0.8.0/utilities/mixins.sass: -------------------------------------------------------------------------------- 1 | @import "initial-variables" 2 | 3 | =clearfix 4 | &::after 5 | clear: both 6 | content: " " 7 | display: table 8 | 9 | =center($width, $height: 0) 10 | position: absolute 11 | @if $height != 0 12 | left: calc(50% - (#{$width} / 2)) 13 | top: calc(50% - (#{$height} / 2)) 14 | @else 15 | left: calc(50% - (#{$width} / 2)) 16 | top: calc(50% - (#{$width} / 2)) 17 | 18 | =fa($size, $dimensions) 19 | display: inline-block 20 | font-size: $size 21 | height: $dimensions 22 | line-height: $dimensions 23 | text-align: center 24 | vertical-align: top 25 | width: $dimensions 26 | 27 | =hamburger($dimensions) 28 | cursor: pointer 29 | display: block 30 | height: $dimensions 31 | position: relative 32 | width: $dimensions 33 | span 34 | background-color: currentColor 35 | display: block 36 | height: 1px 37 | left: calc(50% - 8px) 38 | position: absolute 39 | transform-origin: center 40 | transition-duration: $speed 41 | transition-property: background-color, opacity, transform 42 | transition-timing-function: $easing 43 | width: 16px 44 | &:nth-child(1) 45 | top: calc(50% - 6px) 46 | &:nth-child(2) 47 | top: calc(50% - 1px) 48 | &:nth-child(3) 49 | top: calc(50% + 4px) 50 | &:hover 51 | background-color: rgba(black, 0.05) 52 | // Modifers 53 | &.is-active 54 | span 55 | &:nth-child(1) 56 | transform: translateY(5px) rotate(45deg) 57 | &:nth-child(2) 58 | opacity: 0 59 | &:nth-child(3) 60 | transform: translateY(-5px) rotate(-45deg) 61 | 62 | =overflow-touch 63 | -webkit-overflow-scrolling: touch 64 | 65 | =placeholder 66 | $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' 67 | @each $placeholder in $placeholders 68 | &:#{$placeholder}-placeholder 69 | @content 70 | 71 | // Responsiveness 72 | 73 | =from($device) 74 | @media screen and (min-width: $device) 75 | @content 76 | 77 | =until($device) 78 | @media screen and (max-width: $device - 1px) 79 | @content 80 | 81 | =mobile 82 | @media screen and (max-width: $tablet - 1px) 83 | @content 84 | 85 | =tablet 86 | @media screen and (min-width: $tablet), print 87 | @content 88 | 89 | =tablet-only 90 | @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) 91 | @content 92 | 93 | =touch 94 | @media screen and (max-width: $desktop - 1px) 95 | @content 96 | 97 | =desktop 98 | @media screen and (min-width: $desktop) 99 | @content 100 | 101 | =desktop-only 102 | @if $widescreen-enabled 103 | @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) 104 | @content 105 | 106 | =until-widescreen 107 | @if $widescreen-enabled 108 | @media screen and (max-width: $widescreen - 1px) 109 | @content 110 | 111 | =widescreen 112 | @if $widescreen-enabled 113 | @media screen and (min-width: $widescreen) 114 | @content 115 | 116 | =widescreen-only 117 | @if $widescreen-enabled and $fullhd-enabled 118 | @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) 119 | @content 120 | 121 | =until-fullhd 122 | @if $fullhd-enabled 123 | @media screen and (max-width: $fullhd - 1px) 124 | @content 125 | 126 | =fullhd 127 | @if $fullhd-enabled 128 | @media screen and (min-width: $fullhd) 129 | @content 130 | 131 | // Placeholders 132 | 133 | =unselectable 134 | -webkit-touch-callout: none 135 | -webkit-user-select: none 136 | -moz-user-select: none 137 | -ms-user-select: none 138 | user-select: none 139 | 140 | %unselectable 141 | +unselectable 142 | 143 | =arrow($color: transparent) 144 | border: 3px solid $color 145 | border-radius: 2px 146 | border-right: 0 147 | border-top: 0 148 | content: " " 149 | display: block 150 | height: 0.625em 151 | margin-top: -0.4375em 152 | pointer-events: none 153 | position: absolute 154 | top: 50% 155 | transform: rotate(-45deg) 156 | transform-origin: center 157 | width: 0.625em 158 | 159 | %arrow 160 | +arrow 161 | 162 | =block($spacing: $block-spacing) 163 | &:not(:last-child) 164 | margin-bottom: $spacing 165 | 166 | %block 167 | +block 168 | 169 | =delete 170 | @extend %unselectable 171 | -moz-appearance: none 172 | -webkit-appearance: none 173 | background-color: rgba($scheme-invert, 0.2) 174 | border: none 175 | border-radius: $radius-rounded 176 | cursor: pointer 177 | pointer-events: auto 178 | display: inline-block 179 | flex-grow: 0 180 | flex-shrink: 0 181 | font-size: 0 182 | height: 20px 183 | max-height: 20px 184 | max-width: 20px 185 | min-height: 20px 186 | min-width: 20px 187 | outline: none 188 | position: relative 189 | vertical-align: top 190 | width: 20px 191 | &::before, 192 | &::after 193 | background-color: $scheme-main 194 | content: "" 195 | display: block 196 | left: 50% 197 | position: absolute 198 | top: 50% 199 | transform: translateX(-50%) translateY(-50%) rotate(45deg) 200 | transform-origin: center center 201 | &::before 202 | height: 2px 203 | width: 50% 204 | &::after 205 | height: 50% 206 | width: 2px 207 | &:hover, 208 | &:focus 209 | background-color: rgba($scheme-invert, 0.3) 210 | &:active 211 | background-color: rgba($scheme-invert, 0.4) 212 | // Sizes 213 | &.is-small 214 | height: 16px 215 | max-height: 16px 216 | max-width: 16px 217 | min-height: 16px 218 | min-width: 16px 219 | width: 16px 220 | &.is-medium 221 | height: 24px 222 | max-height: 24px 223 | max-width: 24px 224 | min-height: 24px 225 | min-width: 24px 226 | width: 24px 227 | &.is-large 228 | height: 32px 229 | max-height: 32px 230 | max-width: 32px 231 | min-height: 32px 232 | min-width: 32px 233 | width: 32px 234 | 235 | %delete 236 | +delete 237 | 238 | =loader 239 | animation: spinAround 500ms infinite linear 240 | border: 2px solid $grey-lighter 241 | border-radius: $radius-rounded 242 | border-right-color: transparent 243 | border-top-color: transparent 244 | content: "" 245 | display: block 246 | height: 1em 247 | position: relative 248 | width: 1em 249 | 250 | %loader 251 | +loader 252 | 253 | =overlay($offset: 0) 254 | bottom: $offset 255 | left: $offset 256 | position: absolute 257 | right: $offset 258 | top: $offset 259 | 260 | %overlay 261 | +overlay 262 | -------------------------------------------------------------------------------- /auth/spotify.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | title: Authenticate Mopidy-Spotify 4 | --- 5 | 10 | 11 | 72 |
73 |
74 | 82 | 92 | 98 | 106 |
107 |
108 | -------------------------------------------------------------------------------- /authenticate/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Authenticate 4 | sitemap: false 5 | --- 6 | 7 |
8 |
9 |

Authenticate Mopidy with music services

10 |

11 | The following services require you to get authentication tokens for 12 | Mopidy so that it can connect to your service accounts. 13 |

14 |
15 |
16 | 17 | {% assign exts = site.ext | sort_natural: "title" %} 18 | 19 | {% for ext in exts %} 20 | {% if ext.oauth %} 21 |
22 |
23 |
24 |
25 | {% if ext.logo %} 26 |
27 | {{ ext.title }} logo 28 |
29 | {% endif %} 30 |
31 |
32 |

{{ ext.title }}

33 |

34 | This functionality has moved to the 35 | extension page. 36 |

37 |
38 |
39 |
40 |
41 | {% endif %} 42 | {% endfor %} 43 | -------------------------------------------------------------------------------- /blog/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Blog 4 | --- 5 | 6 |
7 |
8 | 9 | 15 | 16 |

Blog

17 | 18 |
19 |
20 | 21 | {% for post in site.posts limit:3 %} 22 |
23 |
24 | 25 | {% assign author = site.data.authors[post.author] %} 26 |
27 | 28 |

29 | {{ post.title }} 30 |

31 | 32 |

33 | 36 |

37 | 38 |
39 |
40 | 41 |
42 | {{ post.excerpt }} 43 |

Read more...

44 |
45 | 46 |
47 |
48 | 49 |
50 | 51 |
52 |
53 | {% endfor %} 54 | 55 | 56 |
57 |
58 |

Blog archive

59 |
    60 | {% for post in site.posts offset:3 %} 61 |
  • 62 | {{ post.date | date:"%B %e, %Y" }}: 63 | {{ post.title }} 64 |
    • 65 | {% endfor %} 66 |
67 |
68 |
69 | -------------------------------------------------------------------------------- /ext/dists.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Extension distributions 3 | --- 4 | 5 |
6 |
7 | 8 | 15 | 16 |

Extension distributions

17 | 18 | {% assign exts = site.ext | sort_natural: "title" %} 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | {% for ext in exts %} 36 | 37 | 42 | 43 | 52 | 61 | 70 | 82 | 99 | 113 | 114 | {% endfor %} 115 | 116 |
ExtensionTypePyPIAPT (Debian)APT (Mopidy)Arch (AUR)Fedora / RPMFusionmacOS
38 | {{ ext.title }} 39 | {% if ext.dist.bundled %}Bundled{% endif %} 40 | {% if ext.archived %}Archived{% endif %} 41 | {{ ext.type | capitalize }} 44 | {% assign pypi = ext.dist.pypi %} 45 | {% if ext.dist.bundled %}{% assign pypi = "Mopidy" %}{% endif %} 46 | {% if pypi %} 47 | 48 | 49 | 50 | {% endif %} 51 | 53 | {% assign apt = ext.dist.apt-debian %} 54 | {% if ext.dist.bundled %}{% assign apt = "mopidy" %}{% endif %} 55 | {% if apt %} 56 | 57 | 58 | 59 | {% endif %} 60 | 62 | {% assign apt = ext.dist.apt-mopidy %} 63 | {% if ext.dist.bundled %}{% assign apt = "mopidy" %}{% endif %} 64 | {% if apt %} 65 | 66 | 67 | 68 | {% endif %} 69 | 71 | {% if ext.dist.arch-aur %} 72 | 73 | 74 | 75 | {% endif %} 76 | {% if ext.dist.bundled %} 77 | 78 | 79 | 80 | {% endif %} 81 | 83 | {% if ext.dist.fedora %} 84 | 85 | 86 | 87 | {% elsif ext.dist.rpmfusion %} 88 | {% assign parts = ext.dist.rpmfusion | split: '/' %} 89 | 90 | * 91 | 92 | {% endif %} 93 | {% if ext.dist.bundled %} 94 | 95 | 96 | 97 | {% endif %} 98 | 100 | {% if ext.dist.homebrew %} 101 | {% assign repo = ext.dist.homebrew.tap | replace: "/", "/homebrew-" %} 102 | {% assign formula = ext.dist.homebrew.formula %} 103 | {% else if ext.dist.bundled %} 104 | {% assign repo = "mopidy/homebrew-mopidy" %} 105 | {% assign formula = "mopidy" %} 106 | {% endif %} 107 | {% if ext.dist.homebrew or ext.dist.bundled %} 108 | 109 | 110 | 111 | {% endif %} 112 |
117 |
118 | 119 |
120 |
121 | -------------------------------------------------------------------------------- /ext/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Extensions 3 | --- 4 | 5 |
6 |
7 | 8 | 14 | 15 |

Extensions

16 | 17 |

18 | Extend Mopidy with additional music sources, audio mixers, control 19 | planes, web clients, and more. 20 |

21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 | 31 |

Backends

32 |

33 | Add additional music sources. 34 |

35 | {% assign exts = site.ext | where: "type", "backend" | sort_natural: "title" %} 36 | {% include ext-type-list.html %} 37 | 38 |
39 |
40 | 41 |

Web clients

42 |

43 | Serve web-based players with Mopidy's builtin web server. 44 |

45 | {% assign exts = site.ext | where: "type", "web" | sort_natural: "title" %} 46 | {% include ext-type-list.html %} 47 | 48 |
49 |
50 |
51 |
52 | 53 |

Frontends

54 |

55 | Add control planes for user interfaces or event listeners. 56 |

57 | {% assign exts = site.ext | where: "type", "frontend" | sort_natural: "title" %} 58 | {% include ext-type-list.html %} 59 | 60 |
61 |
62 | 63 |

Mixers

64 |

65 | Alternative ways to control volume and muting. 66 |

67 | {% assign exts = site.ext | where: "type", "mixer" | sort_natural: "title" %} 68 | {% include ext-type-list.html %} 69 | 70 |
71 |
72 | 73 |
74 | 75 | 76 |
77 | 78 | {% include ext-footer.html %} 79 | -------------------------------------------------------------------------------- /github-btn.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: none 3 | sitemap: false 4 | --- 5 | 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mopidy 3 | --- 4 | 5 |
6 |
7 |
8 | 9 |
10 |
11 | 12 |

13 | Mopidy is an extensible music server written in Python. 14 |

15 | 16 |

17 | Mopidy plays music from local disk, Spotify, SoundCloud, 18 | TuneIn, and more. You can edit the playlist from any 19 | phone, tablet, or computer using a variety of MPD and web clients. 20 |

21 | 22 |
23 |
24 | 25 |
26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |

Stream music from the cloud

36 | 37 |

38 | Vanilla Mopidy only plays music from files and radio streams. 39 | Through extensions, 40 | Mopidy can play music from cloud services like Spotify, SoundCloud, 41 | and TuneIn. 42 |

43 | 44 |

45 | With Mopidy's extension support, 46 | you can easily add backends for new music sources. 47 |

48 | 49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 | Spotify 57 |
58 |
59 |
60 |
61 | SoundCloud 62 |
63 |
64 |
65 |
66 | TuneIn 67 |
68 |
69 |
70 |
71 | 72 |
73 |
74 | 75 |
76 |
77 | 78 |
79 |
80 | 81 |
82 |
83 | 84 |
85 |
86 |
87 | Mopidy screenshot 89 |
90 |
91 |
92 | 93 |
94 |
95 | 96 |

Mopidy is just a server

97 | 98 |

99 | Mopidy is a Python application that runs in a 100 | terminal or in the background on Linux computers or Macs that have 101 | network connectivity and audio output. 102 |

103 | 104 |

105 | Out of the box, Mopidy is an HTTP server. 106 | If you install the Mopidy-MPD extension, 107 | it becomes an MPD server too. 108 | Many additional frontends for controlling Mopidy are available as 109 | extensions. 110 |

111 | 112 |
113 |
114 | 115 |
116 |
117 | 118 |
119 |
120 | 121 |
122 |
123 | 124 |

Pick your favorite client

125 | 126 |

127 | You and the people around you can all connect their 128 | favorite MPD or web client to the Mopidy server to search for music 129 | and manage the playlist together. 130 |

131 | 132 |

133 | With a browser or MPD client, which is available 134 | for all popular operating systems, you can control the music from 135 | any phone, tablet, or computer. 136 |

137 | 138 |
139 |
140 | 141 |
142 | Iris 143 |
144 | Mopidy-Iris 145 | by James Barnsley 146 |
147 |
148 | 149 |
150 |
151 |
152 |
153 | 154 |
155 |
156 | 157 |
158 |
159 | 160 |
161 | Raspberry Pi 4B 163 |
164 | 165 |
166 |
167 | 168 |

Mopidy on Raspberry Pi

169 | 170 |

171 | The 172 | Raspberry Pi 173 | is an approachable single-board computer to run Mopidy on, 174 | either using Raspbian, Ubuntu, or Arch Linux. 175 |

176 | 177 |

178 | Pimoroni recommends Mopidy for use with their 179 | Pirate Audio 180 | audio gear for Raspberry Pi. 181 |

182 | 183 |
184 |
185 | 186 |
187 |
188 | 189 |
190 |
191 |
192 |
193 | 194 |

Mopidy is hackable

195 | 196 |

197 | Mopidy's extension support and Python, JSON-RPC, and JavaScript 198 | APIs make Mopidy a perfect base for your projects. 199 |

200 | 201 |

202 | In this example project, 203 | a Raspberry Pi was embedded in an old cassette player. 204 | The buttons and volume control are wired up with 205 | GPIO 206 | on the Raspberry Pi and is used to control playback through a 207 | custom Mopidy extension. The cassettes have 208 | NFC 209 | tags used to select playlists from Spotify. 210 |

211 | 212 |
213 |
214 | 215 |
216 | 217 | 218 | 219 | 220 |
221 | Hack by Matt Brailsford 222 |
223 |
224 | 225 |
226 |
227 | 228 |
229 |
230 | 231 |
232 |
233 | 234 |

Ready to get started?

235 | 236 |

237 | 239 | Install Mopidy 240 |

241 | 242 |
243 |
244 | 245 |
246 |
247 | 248 | 251 | 252 | 255 | 256 |
257 |
258 | -------------------------------------------------------------------------------- /media/css/mopidy.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @charset "utf-8"; 5 | 6 | // Fonts 7 | @import url("https://fonts.googleapis.com/css?family=Asap"); 8 | 9 | // Bulma's initial variables 10 | $family-sans-serif: "Asap", sans-serif; 11 | $fullhd-enabled: false; 12 | 13 | @import "bulma-0.8.0/utilities/initial-variables"; 14 | 15 | // Bulma's derived variables 16 | $primary: $blue; 17 | 18 | // Bulma parts we use 19 | @import "bulma-0.8.0/utilities/_all"; 20 | @import "bulma-0.8.0/base/_all"; 21 | @import "bulma-0.8.0/elements/_all"; 22 | //@import "bulma-0.8.0/form/_all"; 23 | @import "bulma-0.8.0/components/_all"; 24 | @import "bulma-0.8.0/grid/_all"; 25 | @import "bulma-0.8.0/layout/_all"; 26 | 27 | // Code blocks 28 | pre.highlight { 29 | margin-bottom: 1em; 30 | } 31 | 32 | // Hero covers 33 | .mw-cover { 34 | background-position: bottom; 35 | background-repeat: no-repeat; 36 | background-size: cover; 37 | } 38 | .mw-cover-mixer-hannah { 39 | @extend .mw-cover; 40 | background-image: url("/media/images/hannah-troupe-wL_w5t_OKtI-unsplash-1900x1200.jpg"); 41 | } 42 | 43 | .avatar { 44 | @extend .is-rounded; 45 | } 46 | 47 | .copy-container { 48 | position: relative; 49 | button { 50 | @extend .button; 51 | font-size: 0.5rem; 52 | position: absolute; 53 | top: 0.25em; 54 | right: 0.25em; 55 | } 56 | } 57 | 58 | .select { 59 | -webkit-user-select: all; 60 | -moz-user-select: all; 61 | -ms-user-select: all; 62 | user-select: all; 63 | } 64 | 65 | .youtube { 66 | position: relative; 67 | } 68 | 69 | .youtube .overlay { 70 | position: absolute; 71 | width: 15%; 72 | height: auto; 73 | top: 50%; 74 | left: 50%; 75 | transform: translate(-50%, -50%); 76 | filter: invert(1); 77 | opacity: 0.9; 78 | } 79 | -------------------------------------------------------------------------------- /media/ext/api-explorer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/api-explorer.jpg -------------------------------------------------------------------------------- /media/ext/auto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/auto.jpg -------------------------------------------------------------------------------- /media/ext/bandcamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/bandcamp.png -------------------------------------------------------------------------------- /media/ext/iris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/iris.jpg -------------------------------------------------------------------------------- /media/ext/jamendo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/jamendo.jpg -------------------------------------------------------------------------------- /media/ext/jellyfin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/jellyfin.png -------------------------------------------------------------------------------- /media/ext/jukepi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/jukepi.jpg -------------------------------------------------------------------------------- /media/ext/listenbrainz.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /media/ext/material-webclient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/material-webclient.jpg -------------------------------------------------------------------------------- /media/ext/mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/mobile.jpg -------------------------------------------------------------------------------- /media/ext/moped.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/moped.png -------------------------------------------------------------------------------- /media/ext/mopify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/mopify.png -------------------------------------------------------------------------------- /media/ext/mopster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/mopster.png -------------------------------------------------------------------------------- /media/ext/mowecl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/mowecl.png -------------------------------------------------------------------------------- /media/ext/muse-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/muse-logo.png -------------------------------------------------------------------------------- /media/ext/muse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/muse.jpg -------------------------------------------------------------------------------- /media/ext/musicbox-webclient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/musicbox-webclient.jpg -------------------------------------------------------------------------------- /media/ext/party.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/party.jpg -------------------------------------------------------------------------------- /media/ext/pibox-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/pibox-logo.png -------------------------------------------------------------------------------- /media/ext/pibox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/pibox.png -------------------------------------------------------------------------------- /media/ext/simple-webclient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/simple-webclient.jpg -------------------------------------------------------------------------------- /media/ext/soundcloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/soundcloud.png -------------------------------------------------------------------------------- /media/ext/spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/spotify.png -------------------------------------------------------------------------------- /media/ext/tidal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/tidal.png -------------------------------------------------------------------------------- /media/ext/touchscreen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/touchscreen.jpg -------------------------------------------------------------------------------- /media/ext/tunein.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/tunein.png -------------------------------------------------------------------------------- /media/ext/youtubemusic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/ext/youtubemusic.png -------------------------------------------------------------------------------- /media/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /media/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /media/images/hannah-troupe-wL_w5t_OKtI-unsplash-1900x1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/images/hannah-troupe-wL_w5t_OKtI-unsplash-1900x1200.jpg -------------------------------------------------------------------------------- /media/images/hannah-troupe-wL_w5t_OKtI-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/images/hannah-troupe-wL_w5t_OKtI-unsplash.jpg -------------------------------------------------------------------------------- /media/images/mopidy-screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/images/mopidy-screenshot.jpg -------------------------------------------------------------------------------- /media/images/raspberry_pi_4b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mopidy/website/b289ae3a2be17bfd5d6823ad24d1e378d9ff4345/media/images/raspberry_pi_4b.jpg -------------------------------------------------------------------------------- /media/js/mopidy.js: -------------------------------------------------------------------------------- 1 | if (window.NodeList && !NodeList.prototype.forEach) { 2 | // Polyfill NodeList.forEach 3 | // https://caniuse.com/#feat=mdn-api_nodelist_foreach 4 | NodeList.prototype.forEach = Array.prototype.forEach; 5 | } 6 | 7 | function random(length) { 8 | return Array.from( 9 | crypto.getRandomValues(new Uint8Array(length || 28)), 10 | x => `00${x.toString(16)}`.slice(-2) 11 | ).join('') 12 | } 13 | 14 | function setupNavbarBurger(navbarBurger) { 15 | navbarBurger.addEventListener("click", () => { 16 | const target = document.getElementById(navbarBurger.dataset.target); 17 | navbarBurger.classList.toggle("is-active"); 18 | target.classList.toggle("is-active"); 19 | }); 20 | } 21 | 22 | function setupTabs(tabContainer) { 23 | const tabs = tabContainer.querySelectorAll("li"); 24 | const contents = []; 25 | 26 | if (tabs.length == 0) { 27 | return; 28 | } 29 | 30 | tabs.forEach(tab => { 31 | const link = tab.querySelector("a"); 32 | const content = document.querySelector(link.getAttribute("href")); 33 | contents.push(content); 34 | 35 | link.addEventListener("click", event => { 36 | event.preventDefault(); 37 | 38 | tabs.forEach(el => el.classList.remove("is-active")); 39 | tab.classList.add("is-active"); 40 | 41 | contents.forEach(el => el.classList.add("is-hidden")); 42 | content.classList.remove("is-hidden"); 43 | }); 44 | }); 45 | 46 | tabs[0].querySelector("a").click(); 47 | } 48 | 49 | function select(el) { 50 | const range = document.createRange(); 51 | range.selectNodeContents(el); 52 | 53 | const selection = window.getSelection(); 54 | selection.removeAllRanges(); 55 | selection.addRange(range); 56 | } 57 | 58 | function setupCopy(el) { 59 | const wrapper = document.createElement("div"); 60 | wrapper.classList.add("copy-container"); 61 | 62 | const button = document.createElement("button"); 63 | button.textContent = "Copy"; 64 | button.addEventListener("click", event => { 65 | event.preventDefault(); 66 | button.classList.add("is-loading"); 67 | setTimeout(_ => button.classList.remove("is-loading"), 200); 68 | select(el); 69 | document.execCommand("copy"); 70 | }); 71 | 72 | el.parentNode.insertBefore(wrapper, el); 73 | wrapper.appendChild(el); 74 | wrapper.appendChild(button); 75 | } 76 | 77 | function openPopup(target, title) { 78 | return window.open( 79 | target, 80 | title, 81 | [ 82 | "toolbar=no", 83 | "location=no", 84 | "directories=no", 85 | "status=no", 86 | "menubar=no", 87 | "scrollbars=no", 88 | "resizable=no", 89 | "copyhistory=no", 90 | "width=" + 800, 91 | "height=" + 600, 92 | "left=" + (screen.width / 2 - 800 / 2), 93 | "top=" + (screen.height / 2 - 600 / 2) 94 | ].join(", ") 95 | ); 96 | } 97 | 98 | function setupAuth(auth) { 99 | let checkPopupInterval = null; 100 | 101 | const button = auth.querySelector(".auth-button"); 102 | const error = auth.querySelector(".auth-error"); 103 | const callbackOrigin = new URL(auth.dataset.origin || button.href).origin; 104 | 105 | const reset = _ => { 106 | clearInterval(checkPopupInterval); 107 | error.classList.add("is-hidden"); 108 | button.classList.remove("is-loading"); 109 | }; 110 | 111 | window.addEventListener("message", event => { 112 | if (event.origin !== callbackOrigin) { 113 | return; 114 | } 115 | 116 | reset(); 117 | event.source.close(); 118 | 119 | if (event.data.error) { 120 | error.innerText = event.data.error.toUpperCase(); 121 | if (event.data.error_description) { 122 | let desc = event.data.error_description; 123 | desc = desc.replace(/^\w/, c => c.toUpperCase()); 124 | desc = desc.replace(/([.]?$)/, "."); 125 | error.innerText += ": " + desc; 126 | } 127 | error.classList.remove("is-hidden"); 128 | } else { 129 | auth.querySelectorAll("[data-name]").forEach(el => { 130 | el.innerText = event.data[el.dataset.name]; 131 | }); 132 | } 133 | }); 134 | 135 | button.addEventListener("click", event => { 136 | event.preventDefault(); 137 | if (button.classList.contains("is-loading")) { 138 | return; 139 | } 140 | 141 | 142 | reset(); 143 | button.classList.add("is-loading"); 144 | 145 | const url = new URL(button.href); 146 | const state = random(); 147 | url.search += (url.search ? '&' : '?') + 'state=' + state; 148 | 149 | const popup = openPopup(url.href, "Authenticate Mopidy extension."); 150 | checkPopupInterval = setInterval(_ => { 151 | if (!popup || popup.closed) { 152 | reset(); 153 | error.innerText = "Popup closed without completing authentication."; 154 | error.classList.remove("is-hidden"); 155 | } else { 156 | popup.postMessage(state, callbackOrigin); 157 | } 158 | }, 200); 159 | }); 160 | } 161 | 162 | function setupLazyIFrame(el) { 163 | const frame = document.createElement("iframe"); 164 | frame.setAttribute("frameborder", "0"); 165 | frame.setAttribute("allowfullscreen", ""); 166 | frame.setAttribute("src", el.dataset.iframe); 167 | 168 | el.addEventListener('click', event => { 169 | event.preventDefault(); 170 | el.style.display = "block"; 171 | frame.setAttribute("width", el.offsetWidth); 172 | frame.setAttribute("height", el.offsetHeight); 173 | frame.setAttribute("class", el.getAttribute("class")); 174 | el.parentNode.replaceChild(frame, el); 175 | }); 176 | } 177 | 178 | function onReady(callback) { 179 | if (document.readyState === 'loading') { 180 | document.addEventListener('DOMContentLoaded', callback); 181 | } else { 182 | callback(); 183 | } 184 | } 185 | 186 | function base64(value) { 187 | return btoa(value).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); 188 | } 189 | 190 | function urlEncode(data) { 191 | return Object.keys(data).map(key => { 192 | return [key, data[key]].map(encodeURIComponent).join('='); 193 | }).join('&'); 194 | } 195 | 196 | onReady(() => { 197 | document.querySelectorAll(".navbar-burger").forEach(setupNavbarBurger); 198 | document.querySelectorAll(".tabs").forEach(setupTabs); 199 | document.querySelectorAll(".copy").forEach(setupCopy); 200 | document.querySelectorAll(".auth").forEach(setupAuth); 201 | document.querySelectorAll("[data-iframe]").forEach(setupLazyIFrame); 202 | }); 203 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /soundcloud_callback/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | sitemap: false 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | Connect with SoundCloud 11 | 43 | 44 | 45 | 46 |

This popup should automatically close in a few seconds.

47 | 48 | 49 | 50 | --------------------------------------------------------------------------------