Repository: iina/iina-website
Branch: master
Commit: 3c27b3cbc6ff
Files: 36
Total size: 115.2 KB
Directory structure:
gitextract_omxa2yr8/
├── .gitignore
├── .ruby-version
├── .vimrc
├── Gemfile
├── LICENSE
├── README.md
├── assets/
│ ├── javascripts/
│ │ └── index.js
│ └── stylesheets/
│ ├── _bootstrap.sass
│ ├── _download.sass
│ ├── _features.sass
│ ├── _index.sass
│ ├── _plugin.sass
│ ├── _utils.sass
│ ├── _variables.scss
│ ├── highlights.sass
│ └── index.sass
├── config.rb
├── data/
│ ├── highlights.yml
│ └── versions.yml
├── helpers/
│ └── download_helper.rb
├── locales/
│ ├── en.yml
│ └── zh-Hans.yml
├── package.json
├── source/
│ ├── _footer.slim
│ ├── _header.slim
│ ├── highlights-template.html.slim
│ ├── images/
│ │ ├── .keep
│ │ └── site.webmanifest
│ ├── layouts/
│ │ ├── highlights.slim
│ │ └── layout.slim
│ └── localizable/
│ ├── download.html.slim
│ ├── features.html.slim
│ ├── index.html.slim
│ ├── nightly.html.slim
│ └── plugins/
│ └── index.html.slim
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# Created by https://www.gitignore.io/api/ruby,node,sass,macos
# Edit at https://www.gitignore.io/?templates=ruby,node,sass,macos
### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride
# Icon must end with two \r
Icon
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# FuseBox cache
.fusebox/
### Ruby ###
*.gem
*.rbc
/.config
/coverage/
/InstalledFiles
/pkg/
/spec/reports/
/spec/examples.txt
/test/tmp/
/test/version_tmp/
/tmp/
# Used by dotenv library to load environment variables.
# .env
## Specific to RubyMotion:
.dat*
.repl_history
build/
*.bridgesupport
build-iPhoneOS/
build-iPhoneSimulator/
## Specific to RubyMotion (use of CocoaPods):
#
# We recommend against adding the Pods directory to your .gitignore. However
# you should judge for yourself, the pros and cons are mentioned at:
# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control
#
# vendor/Pods/
## Documentation cache and generated files:
/.yardoc/
/_yardoc/
/doc/
/rdoc/
## Environment normalization:
/.bundle/
/vendor/bundle
/lib/bundler/man/
# for a library or gem, you might want to ignore these files since the code is
# intended to run in multiple environments; otherwise, check them in:
# Gemfile.lock
# .ruby-version
# .ruby-gemset
# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
.rvmrc
### Sass ###
.sass-cache/
*.css.map
*.sass.map
*.scss.map
# End of https://www.gitignore.io/api/ruby,node,sass,macos
================================================
FILE: .ruby-version
================================================
3.3.1
================================================
FILE: .vimrc
================================================
autocmd FileType ruby setlocal shiftwidth=2 softtabstop=2
autocmd FileType slim setlocal shiftwidth=4 softtabstop=4
autocmd FileType sass setlocal shiftwidth=4 softtabstop=4
autocmd FileType javascript setlocal shiftwidth=4 softtabstop=4
================================================
FILE: Gemfile
================================================
source 'https://rubygems.org'
gem 'middleman', '~> 4.5'
gem 'middleman-autoprefixer', '~> 3.0'
gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]
gem 'wdm', '~> 0.1', platforms: [:mswin, :mingw]
gem 'slim', '~>4.0'
gem 'redcarpet'
gem 'rouge'
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2018 IINA Developers
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# iina-website
The source code of IINA's new website at iina.io.
## How to build
This site is powered by the static site generator [middleman](https://middlemanapp.com).
To set up a local development environment,
please install front and back-end dependencies by running these commands in the project root directory.
Please also make sure that you have yarn and ruby/bundler (`gem install bundler`) installed.
```sh
yarn install
bundle install
```
Then
```sh
bundle exec middleman
```
to run a local server, or
```sh
bundle exec middleman build
```
to generate static files.
## Localization
This site is not ready for localization yet. We are working on this and please stay tuned.
================================================
FILE: assets/javascripts/index.js
================================================
import * as $ from "jquery";
import "popper.js";
import "bootstrap";
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faCloudDownloadAlt } from "@fortawesome/free-solid-svg-icons/faCloudDownloadAlt";
import { faGithub } from "@fortawesome/free-brands-svg-icons/faGithub";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
import { faChrome } from "@fortawesome/free-brands-svg-icons/faChrome";
import { faFirefox } from "@fortawesome/free-brands-svg-icons/faFirefox";
import { faYoutube } from "@fortawesome/free-brands-svg-icons/faYoutube";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons/faEnvelope";
import { faFileVideo } from "@fortawesome/free-solid-svg-icons/faFileVideo";
import { faGlobeAmericas } from "@fortawesome/free-solid-svg-icons/faGlobeAmericas";
import { faGlobe } from "@fortawesome/free-solid-svg-icons/faGlobe";
import { faWindowRestore } from "@fortawesome/free-regular-svg-icons/faWindowRestore";
import { faColumns } from "@fortawesome/free-solid-svg-icons/faColumns";
import { faFileAlt } from "@fortawesome/free-solid-svg-icons/faFileAlt";
import { faPlayCircle } from "@fortawesome/free-solid-svg-icons/faPlayCircle";
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
import { faBroadcastTower } from "@fortawesome/free-solid-svg-icons/faBroadcastTower";
import { faList } from "@fortawesome/free-solid-svg-icons/faList";
import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots";
import { faLayerGroup } from "@fortawesome/free-solid-svg-icons/faLayerGroup";
import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
import { faTerminal } from "@fortawesome/free-solid-svg-icons/faTerminal";
import { faTools } from "@fortawesome/free-solid-svg-icons/faTools";
import { faSitemap } from "@fortawesome/free-solid-svg-icons/faSitemap";
import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
library.add(
faCloudDownloadAlt,
faGithub,
faAngleRight,
faBars,
faChrome,
faFirefox,
faYoutube,
faEnvelope,
faFileVideo,
faGlobeAmericas,
faGlobe,
faWindowRestore,
faColumns,
faFileAlt,
faPlayCircle,
faCube,
faBroadcastTower,
faList,
faCommentDots,
faLayerGroup,
faCog,
faTerminal,
faTools,
faSitemap,
faTimes,
faCheck,
);
dom.watch();
$(() => {
$("#navbarSupportedContent")
.on("show.bs.collapse", () => $(".navbar").addClass("expanded"))
.on("hide.bs.collapse", () => $(".navbar").removeClass("expanded"));
if (document.getElementById("nightly-builds")) {
load_nightly();
}
if (document.body.classList.contains("download")) {
// if url contains #beta-downloads, show the section and scroll to it
if (location.hash.includes("#beta-downloads")) {
$("#beta-downloads").collapse("show");
const element = document.getElementById("beta-downloads");
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}
}
});
// Nightly table
function formatDate(str) {
return new Date(str).toDateString();
}
async function load_nightly() {
const data = await fetch_artifacts();
const commits = await fetch_commits();
const tableBody = document.getElementById("table-body");
if (!tableBody) return;
tableBody.innerHTML = "";
let commit_dict = {};
commits.forEach((commit) => {
commit_dict[commit.sha] = {
author: commit.commit.author.name,
message: commit.commit.message,
};
});
try {
tableBody.append(
...(await Promise.all(
data.artifacts
.filter((item) => item.workflow_run.head_sha in commit_dict)
.map(async (item) => {
const tr = document.createElement("tr");
const sha = item.workflow_run.head_sha;
const url = `https://github.com/iina/iina/actions/runs/${item.workflow_run.id}/artifacts/${item.id}`;
const commit = commit_dict[sha];
tr.innerHTML = `
<td>${formatDate(item.created_at)}</td>
<td align="center"><i class="fa-solid fa-${
item.expired ? "times" : "check"
}"></i></td>
<td>${commit.message.split("\n")[0]}</td>
<td>${commit.author}</td>
<td><a href="https://github.com/iina/iina/commit/${sha}">${sha.substring(
0,
8,
)}</a></td>
<td><a href="${url}">Download on GitHub</a></td>
`;
return tr;
}),
)),
);
} catch {
tableBody.innerHTML = `<div class="text-danger">Error occurred when fetching data from GitHub. Please visit GitHub Actions directly.</div>`;
}
}
async function fetch_artifacts() {
const res = await fetch(
"https://api.github.com/repos/iina/iina/actions/artifacts?per_page=100",
);
return await res.json();
}
async function fetch_commits(sha) {
const res = await fetch(
`https://api.github.com/repos/iina/iina/commits?per_page=100`,
);
return await res.json();
}
window.fetch_artifacts = fetch_artifacts;
================================================
FILE: assets/stylesheets/_bootstrap.sass
================================================
@import "~bootstrap/scss/_functions.scss"
@import "variables"
@import "~bootstrap/scss/bootstrap.scss"
================================================
FILE: assets/stylesheets/_download.sass
================================================
@import "variables"
.downloads
padding: 2rem 0
.dl-card
margin: 1rem 0
padding: 2rem
// border: 1px solid $gray-200
border-radius: 4px
background: $gray-100
.stable-btn, .beta-btn
padding: .375rem 2rem
border-radius: 1.5rem
.tables-container
display: flex
gap: 2rem
flex-wrap: wrap
align-items: flex-start
.table-box
flex: 1 1 45%
min-width: 320px
table
width: 100%
border-collapse: collapse
th,
td
text-align: left
padding: 0.2rem 0.3rem
border-top: 1px solid #ddd
th
background-color: #f6f6f6
font-weight: 600
tr:nth-child(even)
background-color: #fafafa
================================================
FILE: assets/stylesheets/_features.sass
================================================
.nav
padding: 1rem 0 1.5rem 0
.nav-container
h2
margin: 1rem 0 0.5rem 0
.features
padding: 0 0 1rem 0
.features-container
margin-left: -2px
margin-right: -2px
display: flex
align-items: stretch
align-content: stretch
flex-wrap: wrap
.feature-block
padding: 2px
&.half
flex-basis: 50%
@media(max-width: 920px)
flex-basis: 100%
.feature-content p
@media(min-width: 920px)
margin: 0 5%
&.full
flex-basis: 100%
.feature-content p
padding: 0 2rem
@media(min-width: 920px)
margin: 0 10%
.feature-img
img
max-width: 100%
min-width: 100%
.feature-content
height: 100%
background: #f4f4f4
padding: 4rem
transition: all 0.15s ease-in
@media(max-width: 767px)
padding: 3rem 1rem
h4
margin: 0 0 1.5rem 0
text-align: center
font-size: 1.5rem
p
text-align: center
margin: 0
line-height: 1.5
.content.dark
display: none
&.dark
background: #222
color: #eee
.content.dark
display: block
.content.light
display: none
.segment
border-color: #999
&.active
background: #777
&:hover
background: #666
&.mmode
background: url('/media/feature-mmode-bg.png')
background-size: auto 100%
background-position: center
color: #fff
text-shadow: 0 0 4px #444
h4
margin-top: 400px
.segment-control
margin: 1rem auto
text-align: center
font-size: 0.75rem
.segment
display: inline-block
padding: 0.35rem 0.75rem
border: 1px solid #ccc
cursor: pointer
&:first-child
border-radius: 3px 0 0 3px
&:last-child
border-radius: 0 3px 3px 0
&:not(:last-child)
border-right: 0
&.active
background: #ccc
&:hover
background: #ddd
================================================
FILE: assets/stylesheets/_index.sass
================================================
@import "./variables"
@import "./utils"
p
line-height: 1.4
section
overflow: hidden
.title
position: relative
background: linear-gradient(to bottom, #fefefe, #eee)
padding: 17rem 0 15rem 0
+media-breakpoint-down(md)
padding: 8rem 0 13rem 0
+media-breakpoint-up(xl)
padding: 18rem 0 16rem 0
.modern
color: #111
+text-img-bg('/images/text-bg.png')
.sample-image
position: absolute
top: -24%
bottom: -42%
+media-breakpoint-down(sm)
display: none
+media-breakpoint-up(md)
left: 60%
+media-breakpoint-up(lg)
left: 45%
+media-breakpoint-up(xl)
left: 45%
top: -20%
bottom: -36%
img
height: 100%
.small-headline
+font-family-system
font-size: 1rem
font-weight: 500
letter-spacing: .1rem
color: #aaa
padding-left: 0.15em
.headline
font-size: 4rem
font-weight: normal
letter-spacing: .1rem
margin: 0
.sub-headline
font-size: 1.6rem
margin: 1rem 0 0 0
.requirement, .other-downloads
font-size: 0.8rem
margin: 1rem 0 0 0
color: #777
.other-downloads
margin: 0.5rem 0 0 0
.download
margin: 4rem 0 1rem 0
.dl-btn
display: inline-block
background: #111
color: #eee
font-weight: 500
margin: 0.25rem 0
padding: .75rem 1.5rem
text-decoration: none
border-radius: 2rem
&:not(:last-child)
margin-right: 1rem
.light
color: #999
margin-left: 0.5rem
font-size: 0.8em
font-weight: normal
$gradient0: linear-gradient(135deg, #A8E6CF 0%, #FFD3B6 100%)
$gradient1: linear-gradient(36deg, #5CCEB3 0%, #6765D0 65%, #6E4D8A 100%)
.highlight
h2
font-size: 3em
font-weight: 500
p
line-height: 1.6
section
position: relative
.background
+absolute(0)
overflow: hidden
+media-breakpoint-down(sm)
svg
height: 120%
width: 120%
.highlight-link
text-decoration: none
position: relative
.highlight--macos
color: #fff
padding: 6rem 0
background: linear-gradient(to right, #140A17 0%, #041e2a 50%, #140A17 100%)
text-align: center
.background
+absolute(0)
background-image: url(/images/index-bg.svg)
background-repeat: repeat
h2
margin: 0.83rem 0
p
color: #ccc
font-size: 1.2rem
margin: 4rem 10% 6rem 10%
+media-breakpoint-down(sm)
margin: 4rem 4% 0 4%
.highlight-features
margin: 4rem 0 0 0
+media-breakpoint-down(sm)
margin: 2rem 0 0 0
.item
display: flex
text-align: left
padding: 2rem 0
+media-breakpoint-down(md)
display: block
.decoration-line
display: none
&:not(.reversed) .left, &.reversed .right
margin-bottom: 1.6rem
+media-breakpoint-up(md)
&.reversed
flex-direction: row-reverse
.left
padding-right: 1rem
.right
padding-left: 1rem
.decoration-line
margin: 2rem 2px 1rem 2px
width: 50px
height: 3px
background: rgba(255,255,255,0.75)
&:not(.reversed) .left, &.reversed .right
width: 35%
+media-breakpoint-down(lg)
width: 50%
.item-name
font-size: 2rem
font-weight: bold
margin-bottom: 1rem
.item-img img
max-width: 100%
.more-features
padding-top: 4rem
h4
margin-bottom: 4rem
.features
display: flex
.left, .right
width: 50%
padding: 0 1rem
font-size: 1.4rem
font-weight: bold
line-height: 2
.left
text-align: right
.right
text-align: left
+media-breakpoint-down(xs)
width: 100%
text-align: center !important
.bg-1
+text-img-bg('/images/text-bg-1.png')
.bg-2
+text-img-bg('/images/text-bg-2.png')
.bg-3
+text-img-bg('/images/text-bg-3.png')
.bg-4
+text-img-bg('/images/text-bg-4.png')
.bg-5
+text-img-bg('/images/text-bg-5.png')
.bg-6
+text-img-bg('/images/text-bg-6.png')
.bg-large-l
+text-img-bg('/images/text-bg-large-l.png')
background-position: right
.bg-large-r
+text-img-bg('/images/text-bg-large-r.png')
background-position: left
.highlight-link
display: inline-block
margin-top: 2rem
padding: 0.5rem 2.5rem
color: #000
font-weight: 500
letter-spacing: 0.05px
border-radius: 2.25rem
background: #fff
.comming-soon
font-size: 0.75rem
font-weight: normal
opacity: 0.5
.highlight--playback
text-align: left
padding: 8rem 0
background: linear-gradient(154deg, #042A84 0%, #2C98A5 69%, #B9AE9B 100%)
color: $white
.container
position: relative
p
font-size: 1.2rem
margin: 3rem 25% 3rem 0
+media-breakpoint-down(sm)
margin-right: 15%
+media-breakpoint-down(xs)
margin-right: 0
.items
display: flex
text-align: center
color: $gray-700
.item
width: 160px
margin-right: 1rem
background: $white
border-radius: 6px
box-shadow: 0 0 6px rgba(0,0,0,.3)
padding: 1rem 1.2rem
font-size: 90%
.item-icon
color: $gray-800
padding: 0.5rem 0 1rem 0
.item-text
padding-top: 0.5rem
border-top: 1px solid $gray-300
a
&, &:hover, &:active
color: #fff
.highlight--opensource
text-align: right
padding: 8rem 0
background: linear-gradient(140deg, #FFEFEF 0%, #FFC084 100%)
color: $gray-900
p
font-size: 1.2rem
margin: 3rem 0 3rem 25%
+media-breakpoint-down(sm)
margin-left: 15%
+media-breakpoint-down(xs)
margin-left: 0
.swift-bg
position: absolute
left: -10%
opacity: 0.5
top: 50%
transform: translateY(-50%)
.content
position: relative
.highlight-link
display: inline-block
margin: 2rem 0 0 0
padding: .75rem 1.5rem
color: $gray-900
border: 1px solid $gray-900
border-radius: 1.75rem
.plugin-pr
.plugin-pr-content
display: flex
align-content: flex-start
align-items: center
padding: 1rem 0
h6
margin: 0
color: #e76000
.plugin-pr-links
margin-left: 2rem
a
color: $gray-700 !important
================================================
FILE: assets/stylesheets/_plugin.sass
================================================
@import "variables"
.cube
position: absolute
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M234.5 5.7c13.9-5 29.1-5 43.1 0l192 68.6C495 83.4 512 107.5 512 134.6l0 242.9c0 27-17 51.2-42.5 60.3l-192 68.6c-13.9 5-29.1 5-43.1 0l-192-68.6C17 428.6 0 404.5 0 377.4L0 134.6c0-27 17-51.2 42.5-60.3l192-68.6zM256 66L82.3 128 256 190l173.7-62L256 66zm32 368.6l160-57.1 0-188L288 246.6l0 188z"/></svg>')
opacity: 0.05
&.lg
width: 80px
height: 80px
&.md
width: 40px
height: 40px
&.sm
width: 20px
height: 20px
#overview
padding: 4rem 0 0 0
background: linear-gradient(180deg, $gray-300, #fff)
position: relative
.background
transform: translateX(-20px)
position: absolute
width: 100%
#demo
padding: 4rem 0
pre
padding: 16px
border-radius: 6px
box-shadow: 0 0 10px rgba(0,0,0,.5)
max-width: 600px
margin: 2rem auto 1rem auto
.description
color: rgba(0,0,0,.6)
font-size: 0.875rem
text-align: center
.modules
display: flex
flex-wrap: wrap
margin: 2rem -1rem
.module-wrapper
padding: 1rem
width: 33.333%
.module-container
height: 100%
border: 1px solid $gray-300
border-radius: 8px
padding: 1.25rem
box-shadow: 0 2px 5px rgba(0,0,0,.1)
background: linear-gradient(150deg, #fff, $gray-100)
.module-name
font-size: 1.125rem
font-weight: bold
margin-bottom: 0.875rem
color: $primary
span
color: #212529
.module-desc
color: rgba(0,0,0,.6)
#resources
padding: 0 0 4rem 0
@include media-breakpoint-down(sm)
.cube.h
display: none
.modules
.module-wrapper
padding: 0.5rem
width: 50%
@include media-breakpoint-down(xs)
.modules
.module-wrapper
width: 100%
================================================
FILE: assets/stylesheets/_utils.sass
================================================
=font-family-system
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
=clear-float
&:before, &:after
display: table
content: ' '
&:after
clear: both
=absolute($inset)
position: absolute
left: $inset
right: $inset
top: $inset
bottom: $inset
=text-img-bg($img)
background-image: url($img)
background-repeat: no-repeat
background-clip: text
background-position: left
text-fill-color: transparent
-webkit-background-clip: text
-webkit-text-fill-color: transparent
================================================
FILE: assets/stylesheets/_variables.scss
================================================
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
//
// Color system
//
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$grays: ();
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
(
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
),
$grays
);
$blue: #0368d4;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #28a745;
$teal: #20c997;
$cyan: #17a2b8;
$colors: ();
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
(
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
),
$colors
);
$primary: #037ae3;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-800;
$theme-colors: ();
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
),
$theme-colors
);
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8%;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900;
$yiq-text-light: $white;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true;
$enable-rounded: true;
$enable-shadows: false;
$enable-gradients: false;
$enable-transitions: true;
$enable-hover-media-query: false; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true;
$enable-print-styles: true;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem;
$spacers: ();
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
(
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
),
$spacers
);
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: ();
// stylelint-disable-next-line scss/dollar-variable-default
$sizes: map-merge(
(
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
),
$sizes
);
// Body
//
// Settings for the `<body>` element.
$body-bg: $white;
$body-color: $gray-900;
// Links
//
// Style anchor elements.
$link-color: theme-color("primary");
$link-decoration: none;
$link-hover-color: darken($link-color, 15%);
$link-hover-decoration: underline;
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 1rem;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12;
$grid-gutter-width: 30px;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: 1.5;
$line-height-sm: 1.5;
$border-width: 1px;
$border-color: $gray-300;
$border-radius: .25rem;
$border-radius-lg: .3rem;
$border-radius-sm: .2rem;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
$box-shadow: 0 .5rem 1rem rgba($black, .15);
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
$component-active-color: $white;
$component-active-bg: theme-color("primary");
$caret-width: .3em;
$transition-base: all .2s ease-in-out;
$transition-fade: opacity .15s linear;
$transition-collapse: height .35s ease;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
$font-family-sans-serif: "Rubik", Helvetica, Arial, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
// stylelint-enable value-keyword-case
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-lg: ($font-size-base * 1.25);
$font-size-sm: ($font-size-base * .875);
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
$headings-margin-bottom: ($spacer / 2);
$headings-font-family: inherit;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: inherit;
$display1-size: 6rem;
$display2-size: 5.5rem;
$display3-size: 4.5rem;
$display4-size: 3.5rem;
$display1-weight: 300;
$display2-weight: 300;
$display3-weight: 300;
$display4-weight: 300;
$display-line-height: $headings-line-height;
$lead-font-size: ($font-size-base * 1.25);
$lead-font-weight: 300;
$small-font-size: 80%;
$text-muted: $gray-600;
$blockquote-small-color: $gray-600;
$blockquote-font-size: ($font-size-base * 1.25);
$hr-border-color: rgba($black, .1);
$hr-border-width: $border-width;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25);
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
$hr-margin-y: $spacer;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem;
$table-cell-padding-sm: .3rem;
$table-bg: transparent;
$table-accent-bg: rgba($black, .05);
$table-hover-bg: rgba($black, .075);
$table-active-bg: $table-hover-bg;
$table-border-width: $border-width;
$table-border-color: $gray-300;
$table-head-bg: $gray-200;
$table-head-color: $gray-700;
$table-dark-bg: $gray-900;
$table-dark-accent-bg: rgba($white, .05);
$table-dark-hover-bg: rgba($white, .075);
$table-dark-border-color: lighten($gray-900, 7.5%);
$table-dark-color: $body-bg;
$table-striped-order: odd;
$table-caption-color: $text-muted;
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: .375rem;
$input-btn-padding-x: .75rem;
$input-btn-line-height: $line-height-base;
$input-btn-focus-width: .2rem;
$input-btn-focus-color: rgba($component-active-bg, .25);
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm: .25rem;
$input-btn-padding-x-sm: .5rem;
$input-btn-line-height-sm: $line-height-sm;
$input-btn-padding-y-lg: .5rem;
$input-btn-padding-x-lg: 1rem;
$input-btn-line-height-lg: $line-height-lg;
$input-btn-border-width: $border-width;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-line-height: $input-btn-line-height;
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-line-height-sm: $input-btn-line-height-sm;
$btn-padding-y-lg: $input-btn-padding-y-lg;
$btn-padding-x-lg: $input-btn-padding-x-lg;
$btn-line-height-lg: $input-btn-line-height-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
$btn-link-disabled-color: $gray-600;
$btn-block-spacing-y: .5rem;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
// Forms
$label-margin-bottom: .5rem;
$input-padding-y: $input-btn-padding-y;
$input-padding-x: $input-btn-padding-x;
$input-line-height: $input-btn-line-height;
$input-padding-y-sm: $input-btn-padding-y-sm;
$input-padding-x-sm: $input-btn-padding-x-sm;
$input-line-height-sm: $input-btn-line-height-sm;
$input-padding-y-lg: $input-btn-padding-y-lg;
$input-padding-x-lg: $input-btn-padding-x-lg;
$input-line-height-lg: $input-btn-line-height-lg;
$input-bg: $white;
$input-disabled-bg: $gray-200;
$input-color: $gray-700;
$input-border-color: $gray-400;
$input-border-width: $input-btn-border-width;
$input-box-shadow: inset 0 1px 1px rgba($black, .075);
$input-border-radius: $border-radius;
$input-border-radius-lg: $border-radius-lg;
$input-border-radius-sm: $border-radius-sm;
$input-focus-bg: $input-bg;
$input-focus-border-color: lighten($component-active-bg, 25%);
$input-focus-color: $input-color;
$input-focus-width: $input-btn-focus-width;
$input-focus-box-shadow: $input-btn-focus-box-shadow;
$input-placeholder-color: $gray-600;
$input-plaintext-color: $body-color;
$input-height-border: $input-border-width * 2;
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2);
$input-height: calc(#{$input-height-inner} + #{$input-height-border});
$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2);
$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border});
$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2);
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border});
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$form-text-margin-top: .25rem;
$form-check-input-gutter: 1.25rem;
$form-check-input-margin-y: .3rem;
$form-check-input-margin-x: .25rem;
$form-check-inline-margin-x: .75rem;
$form-check-inline-input-margin-x: .3125rem;
$form-group-margin-bottom: 1rem;
$input-group-addon-color: $input-color;
$input-group-addon-bg: $gray-200;
$input-group-addon-border-color: $input-border-color;
$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$custom-control-gutter: 1.5rem;
$custom-control-spacer-x: 1rem;
$custom-control-indicator-size: 1rem;
$custom-control-indicator-bg: $gray-300;
$custom-control-indicator-bg-size: 50% 50%;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1);
$custom-control-indicator-disabled-bg: $gray-200;
$custom-control-label-disabled-color: $gray-600;
$custom-control-indicator-checked-color: $component-active-color;
$custom-control-indicator-checked-bg: $component-active-bg;
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5);
$custom-control-indicator-checked-box-shadow: none;
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow;
$custom-control-indicator-active-color: $component-active-color;
$custom-control-indicator-active-bg: lighten($component-active-bg, 35%);
$custom-control-indicator-active-box-shadow: none;
$custom-checkbox-indicator-border-radius: $border-radius;
$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23");
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color;
$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23");
$custom-checkbox-indicator-indeterminate-box-shadow: none;
$custom-radio-indicator-border-radius: 50%;
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23");
$custom-select-padding-y: .375rem;
$custom-select-padding-x: .75rem;
$custom-select-height: $input-height;
$custom-select-indicator-padding: 1rem; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-btn-line-height;
$custom-select-color: $input-color;
$custom-select-disabled-color: $gray-600;
$custom-select-bg: $input-bg;
$custom-select-disabled-bg: $gray-200;
$custom-select-bg-size: 8px 10px; // In pixels because image dimensions
$custom-select-indicator-color: $gray-800;
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23");
$custom-select-border-width: $input-btn-border-width;
$custom-select-border-color: $input-border-color;
$custom-select-border-radius: $border-radius;
$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075);
$custom-select-focus-border-color: $input-focus-border-color;
$custom-select-focus-width: $input-btn-focus-width;
$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5);
$custom-select-font-size-sm: 75%;
$custom-select-height-sm: $input-height-sm;
$custom-select-font-size-lg: 125%;
$custom-select-height-lg: $input-height-lg;
$custom-range-track-width: 100%;
$custom-range-track-height: .5rem;
$custom-range-track-cursor: pointer;
$custom-range-track-bg: $gray-300;
$custom-range-track-border-radius: 1rem;
$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1);
$custom-range-thumb-width: 1rem;
$custom-range-thumb-height: $custom-range-thumb-width;
$custom-range-thumb-bg: $component-active-bg;
$custom-range-thumb-border: 0;
$custom-range-thumb-border-radius: 1rem;
$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1);
$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow;
$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width; // For focus box shadow issue in IE/Edge
$custom-range-thumb-active-bg: lighten($component-active-bg, 35%);
$custom-file-height: $input-height;
$custom-file-height-inner: $input-height-inner;
$custom-file-focus-border-color: $input-focus-border-color;
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow;
$custom-file-disabled-bg: $input-disabled-bg;
$custom-file-padding-y: $input-btn-padding-y;
$custom-file-padding-x: $input-btn-padding-x;
$custom-file-line-height: $input-btn-line-height;
$custom-file-color: $input-color;
$custom-file-bg: $input-bg;
$custom-file-border-width: $input-btn-border-width;
$custom-file-border-color: $input-border-color;
$custom-file-border-radius: $input-border-radius;
$custom-file-box-shadow: $input-box-shadow;
$custom-file-button-color: $custom-file-color;
$custom-file-button-bg: $input-group-addon-bg;
$custom-file-text: (
en: "Browse"
);
// Form validation
$form-feedback-margin-top: $form-text-margin-top;
$form-feedback-font-size: $small-font-size;
$form-feedback-valid-color: theme-color("success");
$form-feedback-invalid-color: theme-color("danger");
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-min-width: 10rem;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-divider-bg: $gray-200;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175);
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: darken($gray-900, 5%);
$dropdown-link-hover-bg: $gray-100;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-600;
$dropdown-item-padding-y: .25rem;
$dropdown-item-padding-x: 1.5rem;
$dropdown-header-color: $gray-600;
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-popover: 1060;
$zindex-tooltip: 1070;
// Navs
$nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$nav-link-disabled-color: $gray-600;
$nav-tabs-border-color: $gray-300;
$nav-tabs-border-width: $border-width;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color: $gray-700;
$nav-tabs-link-active-bg: $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
$nav-pills-border-radius: $border-radius;
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;
$nav-divider-color: $gray-200;
$nav-divider-margin-y: ($spacer / 2);
// Navbar
$navbar-padding-y: ($spacer / 2);
$navbar-padding-x: $spacer;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2);
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-dark-color: rgba($white, .5);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-light-color: rgba($black, .5);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23");
$navbar-light-toggler-border-color: rgba($black, .1);
// Pagination
$pagination-padding-y: .5rem;
$pagination-padding-x: .75rem;
$pagination-padding-y-sm: .25rem;
$pagination-padding-x-sm: .5rem;
$pagination-padding-y-lg: .75rem;
$pagination-padding-x-lg: 1.5rem;
$pagination-line-height: 1.25;
$pagination-color: $link-color;
$pagination-bg: $white;
$pagination-border-width: $border-width;
$pagination-border-color: $gray-300;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow;
$pagination-focus-outline: 0;
$pagination-hover-color: $link-hover-color;
$pagination-hover-bg: $gray-200;
$pagination-hover-border-color: $gray-300;
$pagination-active-color: $component-active-color;
$pagination-active-bg: $component-active-bg;
$pagination-active-border-color: $pagination-active-bg;
$pagination-disabled-color: $gray-600;
$pagination-disabled-bg: $white;
$pagination-disabled-border-color: $gray-300;
// Jumbotron
$jumbotron-padding: 2rem;
$jumbotron-bg: $gray-200;
// Cards
$card-spacer-y: .75rem;
$card-spacer-x: 1.25rem;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
$card-cap-bg: rgba($black, .03);
$card-bg: $white;
$card-img-overlay-padding: 1.25rem;
$card-group-margin: ($grid-gutter-width / 2);
$card-deck-margin: $card-group-margin;
$card-columns-count: 3;
$card-columns-gap: 1.25rem;
$card-columns-margin: $card-spacer-y;
// Tooltips
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: .25rem;
$tooltip-padding-x: .5rem;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
// Popovers
$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: $border-width;
$popover-border-color: rgba($black, .2);
$popover-border-radius: $border-radius-lg;
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2);
$popover-header-bg: darken($popover-bg, 3%);
$popover-header-color: $headings-color;
$popover-header-padding-y: .5rem;
$popover-header-padding-x: .75rem;
$popover-body-color: $body-color;
$popover-body-padding-y: $popover-header-padding-y;
$popover-body-padding-x: $popover-header-padding-x;
$popover-arrow-width: 1rem;
$popover-arrow-height: .5rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: fade-in($popover-border-color, .05);
// Badges
$badge-font-size: 75%;
$badge-font-weight: $font-weight-bold;
$badge-padding-y: .25em;
$badge-padding-x: .4em;
$badge-border-radius: $border-radius;
$badge-pill-padding-x: .6em;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius: 10rem;
// Modals
// Padding applied to the modal body
$modal-inner-padding: 1rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5);
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5);
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $gray-200;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding: 1rem;
$modal-lg: 800px;
$modal-md: 500px;
$modal-sm: 300px;
$modal-transition: transform .3s ease-out;
// Alerts
//
// Define alert colors, border radius, and padding.
$alert-padding-y: .75rem;
$alert-padding-x: 1.25rem;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-level: -10;
$alert-border-level: -9;
$alert-color-level: 6;
// Progress bars
$progress-height: 1rem;
$progress-font-size: ($font-size-base * .75);
$progress-bg: $gray-200;
$progress-border-radius: $border-radius;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1);
$progress-bar-color: $white;
$progress-bar-bg: theme-color("primary");
$progress-bar-animation-timing: 1s linear infinite;
$progress-bar-transition: width .6s ease;
// List group
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: .75rem;
$list-group-item-padding-x: 1.25rem;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
// Image thumbnails
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075);
// Figures
$figure-caption-font-size: 90%;
$figure-caption-color: $gray-600;
// Breadcrumbs
$breadcrumb-padding-y: .75rem;
$breadcrumb-padding-x: 1rem;
$breadcrumb-item-padding: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: $gray-200;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote("/");
$breadcrumb-border-radius: $border-radius;
// Carousel
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-active-bg: $white;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-control-icon-width: 20px;
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23");
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23");
$carousel-transition: transform .6s ease; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
// Close
$close-font-size: $font-size-base * 1.5;
$close-font-weight: $font-weight-bold;
$close-color: $black;
$close-text-shadow: 0 1px 0 $white;
// Code
$code-font-size: 87.5%;
$code-color: $pink;
$kbd-padding-y: .2rem;
$kbd-padding-x: .4rem;
$kbd-font-size: $code-font-size;
$kbd-color: $white;
$kbd-bg: $gray-900;
$pre-color: $gray-900;
$pre-scrollable-max-height: 340px;
// Printing
$print-page-size: a3;
$print-body-min-width: map-get($grid-breakpoints, "lg");
================================================
FILE: assets/stylesheets/highlights.sass
================================================
$main: #276ad8
$main-light: #45a2ff
@import "utils"
\:root
color-scheme: light dark
--bg-color: #fff
--sub-title-color: rgba(0, 0, 0, .85)
--sub-title-underline-color: #{transparentize($main, 0.6)}
--text-color: rgba(0, 0, 0, .6)
--separator-color: rgba(0, 0, 0,.1)
--main-color: #{$main}
--title-bg: url('/images/title-bg.jpeg')
--item-bg: rgba(0, 0, 0, .04)
@media (prefers-color-scheme: dark)
\:root
--bg-color: #1e1e1e
--sub-title-color: rgba(255, 255, 255,.9)
--sub-title-underline-color: #{transparentize($main-light, 0.4)}
--text-color: rgba(255, 255, 255, .7)
--separator-color: rgba(255, 255, 255, .1)
--main-color: #{$main-light}
--title-bg: url('/images/title-bg-light.jpeg')
--item-bg: rgba(255, 255, 255, .03)
html
font-family: -apple-system, BlinkMacSystemFont, sans-serif
background: var(--bg-color)
html[lang=zh-Hans]
font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif
body
font-size: 13px
line-height: 1.4
margin: 0
padding: 0
background: var(--bg-color)
#main
padding: 0 48px
.page
padding: 24px 0
h1
font-size: 32px
margin: 12px 0
+text-img-bg("/images/title-bg-light.jpeg")
background-image: var(--title-bg)
.deco
width: 100px
height: 8px
background: linear-gradient(45deg, $main, #7457e8)
.highlights-container
padding: 32px 0
a
color: var(--main-color)
.highlight-item
padding: 16px 24px
background: var(--item-bg)
border-radius: 8px
&.image-right
display: flex
align-items: top
.image
padding-left: 16px
.image-container
width: 200px
height: 120px
border-radius: 6px
border: 2px solid var(--main-color)
box-shadow: 0 0 1px #000
overflow: hidden
img
max-height: 100%
&.image-bottom
.image
padding-top: 16px
.image-container
max-width: 80%
margin: 0 auto
img
max-width: 100%
max-height: 400px
.content
width: 100%
flex: 1 1
h4
color: var(--sub-title-color)
font-size: 20px
margin: 0 0 12px 0
span
display: inline-block
border-bottom: 2px solid var(--sub-title-underline-color)
p
font-size: 16px
margin: 0
color: var(--text-color)
.separator
width: 120px
border-bottom: 1px solid var(--separator-color)
margin: 24px auto
.highlights-more
input#expand
display: none
.release-note-link
padding-left: 4px
font-size: 16px
color: var(--main-color)
text-decoration: none
cursor: pointer
&:hover
text-decoration: underline
.release-note-container
width: 100%
margin-top: 16px
max-height: 0
overflow: hidden
transition: max-height .25s ease-in-out
background: var(--bg-color)
border-radius: 8px
border: 1px solid rgba(255, 255, 255, .2)
iframe
width: 100%
width: calc(100% - 32px)
border: 0
padding: 16px
#expand:checked + .release-note-link + .release-note-container
max-height: 1000vh
================================================
FILE: assets/stylesheets/index.sass
================================================
@import "bootstrap"
html, body
margin: 0
padding: 0
html
+media-breakpoint-down(md)
font-size: 15px
+media-breakpoint-down(xs)
font-size: 13px
body.index
#main
@import "_index"
body.features
#main
@import "_features"
body.download
#main
@import "_download"
body.plugin
#header .navbar
background: $gray-300
border-bottom: 1px solid $gray-500
#main
@import "_plugin"
.svg-inline--fa
margin-right: 0.5rem
body.index
#header
position: absolute
left: 0
right: 0
top: 0
z-index: 1000
.navbar
background-color: transparentize($light, .3)
backdrop-filter: blur(10px)
+media-breakpoint-down(xs)
#main
.title
padding-top: 11.875rem
#header
.navbar
transition: all 0.3s ease-out !important
box-shadow: 0 0 6px transparentize(#000, .75)
&:not(.expanded)
border: none
background-color: transparent
box-shadow: 0 0 6px transparent
#header
.navbar
background-color: $light
backdrop-filter: blur(10px)
border-bottom: 1px solid $gray-300
.navbar-brand
span
vertical-align: middle
img
width: 2rem
.navbar-toggler
border: none
.nav-link
padding-left: .75rem
padding-right: .75rem
&.stressed
background: $gray-200
border-radius: 2rem
&:hover
background: darken($gray-200, 5%)
&.right
border-radius: 0 2rem 2rem 0
&.left
border-radius: 2rem 0 0 2rem
+media-breakpoint-down(xs)
.navbar-brand
padding: .5rem
img
width: 2.461538462rem
.nav-item
&:first-child
margin-top: 0.75rem
border-top: 1px solid $gray-300
&:not(:last-child)
border-bottom: 1px solid $gray-300
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
&:first-child
border-top: 0.5px solid $gray-300
&:not(:last-child)
border-bottom: 0.5px solid $gray-300
.nav-link
line-height: 3
&.stressed
&.left, &.right
background: none
.svg-inline--fa
display: none
footer
background: $gray-900
color: #bbb
padding: 2rem 0
font-size: 0.9rem
a
color: #efefef
&:hover, &:active
color: #fff
.author
padding: 2rem 0
margin: 0
hr
border-color: $gray-800
================================================
FILE: config.rb
================================================
# Activate and configure extensions
# https://middlemanapp.com/advanced/configuration/#configuring-extensions
require 'rouge'
require 'rouge/plugins/redcarpet'
class HTMLWithHighlight < Redcarpet::Render::HTML
include Rouge::Plugins::Redcarpet
end
set :markdown_engine, :redcarpet
set :markdown, :fenced_code_blocks => true, :smartypants => true, :with_toc_data => true, :underline => true, :hard_wrap => true, highlight: true
md_opts = {
renderer: HTMLWithHighlight.new,
:fenced_code_blocks => true,
:smartypants => true,
:underline => true,
:hard_wrap => true,
highlight: true
}
Slim::Embedded.options[:markdown] = md_opts
ALT_MD_RENDERER = Redcarpet::Markdown.new(HTMLWithHighlight, md_opts)
activate :autoprefixer do |prefix|
prefix.browsers = "last 2 versions"
end
activate :directory_indexes
activate :i18n
# Layouts
# https://middlemanapp.com/basics/layouts/
# Per-page layout changes
page '/*.xml', layout: false
page '/*.json', layout: false
page '/*.txt', layout: false
# With alternative layout
# page '/path/to/file.html', layout: 'other_layout'
# Proxy pages
# https://middlemanapp.com/advanced/dynamic-pages/
locales = %i(zh-Hans)
@app.data.highlights.each_key do |v|
ver = v[1..]
proxy "/highlights/#{ver}/index.html", "/highlights-template.html", locals: { version: ver }, locale: :en, ignore: true
locales.each do |lang|
proxy "/#{lang}/highlights/#{ver}/index.html", "/highlights-template.html", locals: { version: ver }, locale: lang, ignore: true
end
end
# Helpers
# Methods defined in the helpers block are available in templates
# https://middlemanapp.com/basics/helper-methods/
helpers do
def localized_path(path)
return path unless path.start_with? '/'
if I18n.locale == :en
path
else
"/#{I18n.locale}#{path}"
end
end
def download_link(definition)
if definition.filename.nil?
"https://dl-portal.iina.io/IINA.v#{definition.version}.dmg"
else
"https://dl-portal.iina.io/#{definition.filename}"
end
end
def release_note_link(version)
"/release-note/#{version}.html"
end
def plugin_doc?
current_page.url.start_with? '/plugin/documentation/'
end
def doc_api_title(api)
params = if api.params.nil?
''
else
api.params.keys.join(', ')
end
if (api.type || 'method') == 'method'
"#{api.name}(#{params})"
else
api.name
end
end
def doc_api_type(api)
t = api.type || 'method'
{
'method' => 'Method',
'prop' => 'Property',
'readonly' => 'Readonly Property',
}[t]
end
def render_markdown(str)
ALT_MD_RENDERER.render(str).html_safe
end
end
# Build-specific configuration
# https://middlemanapp.com/advanced/configuration/#environment-specific-settings
# configure :build do
# activate :minify_css
# activate :minify_javascript
# end
activate :external_pipeline,
name: :webpack,
command: build? ? 'npm run build' : 'npm run start',
source: 'tmp/dist',
latency: 1
config[:js_dir] = 'assets/javascripts'
config[:css_dir] = 'assets/stylesheets'
================================================
FILE: data/highlights.yml
================================================
v1.1.0:
- title: New Icons
desc: We have updated the icons in the on-screen controller to provide a better user experience and match the upcoming macOS release.
image: icons.png
- title: Precise Time Display
desc: Choose your desired time precision by right-clicking the time or duration label.
image: time.png
- title: Screenshot Previews
desc: After taking a screenshot, now IINA will show you a preview with some quick actions.
image: sc.png
image_pos: bottom
image_width: 885
- title: Music Artists/Titles in the Playlist
desc: Now IINA will show metadata for music files in the playlist. You can configure this option in Preferences > General > Playlist.
image: pl.png
image_pos: bottom
image_width: 412
- title: Force Dedicated GPU
desc: This new option under Preferences > Video/Audio allows always using dedicated GPU for rendering to deliver better performance.
v1.2.0:
- title: Native Build for M1 Macs
desc: Now IINA is shipped with a universal binary that run natively on both Intel and M1-based Macs.
v1.3.0:
- title: Built for the Latest OS and Hardware
desc: Thanks to all the contributors in the past year, we were able to fix most crashes and major bugs in the previous version. IINA 1.3.0 added support for macOS Monterey and the new MacBooks. Please read the full release note for a complete list of fixed issues.
image: macos2.png
image_pos: bottom
image_width: 200
- title: HDR and EDR Support
desc: You can now enjoy HDR videos on compatible displays. Switch HDR on/off conveniently in the sidebar.
image: hdr.png
image_pos: bottom
image_width: 400
- title: Broken features are working now
desc: IINA 1.3.0 is a fresh build restoring all broken features, including legacy full screen and YouTube videos.
v1.3.1:
- title: Better HDR Support, More Bug Fixes
desc: IINA 1.3.1 includes important fixes to bugs and crashes to make IINA more stable. IINA is also ready for macOS Ventura.
- more: <b>Deprecation Notice</b><br>
Xcode 14 now only supports building for macOS 10.13 and above.
We will work towards possible solutions,
but please be aware that we may have to drop support for macOS 10.11 and 10.12 in future releases.
IINA 1.3.1 might be the last version that supports macOS 10.12 Sierra.
- more: <b>GitHub Sponsors</b><br>
We are testing the <a href="https://github.com/sponsors/iina">GitHub Sponsors</a> program.
Maintaining a free and open-source software costs us time and money.
If you like IINA and would like to support us financially, please consider sponsoring us on GitHub.
More ways to donate will be added in the future.
v1.3.2:
- title: Better HDR and Hardware Acceleration
desc: IINA 1.3.2 also includes important fixes to bugs and crashes to make IINA more stable.
- title: New File Icons and Log Viewer
desc: IINA 1.3.2 includes new file icons for all supported file types.
The new Log Viewer allows you to easily view and share logs, which is useful for troubleshooting,
and provides a debugging tool for the upcoming plugin system.
- more: <b>The Plugin System</b><br>
We have been working on a plugin system for IINA for over a year.
The plugin system will bring infinite possibilities to IINA, allowing you to extend IINA with new features
such as live comments, synchronized playback, online service integration, and more.
We will release a beta version of the plugin system soon.
- more: <b>Deprecation Notice</b><br>
IINA 1.3.2 only supports macOS 10.13 and above. We will release a separate version for macOS 10.11-10.12
soon. Depending on our development progress, IINA 1.3.2 may be the last version to support macOS
10.11 and 10.12.
- more: <b>GitHub Sponsors</b><br>
We are testing the <a href="https://github.com/sponsors/iina">GitHub Sponsors</a> program.
Maintaining a free and open-source software costs us time and money.
If you like IINA and would like to support us financially, please consider sponsoring us on GitHub.
More ways to donate will be added in the future.
v1.3.3:
- title: More Bug Fixes
desc: IINA 1.3.3 includes important fixes to bugs and crashes to make IINA more stable.
v1.3.4:
- title: More Bug Fixes
desc: IINA 1.3.4 uses the new OpenSubtitles API and includes important fixes to bugs and crashes to make IINA more stable.
v1.3.5:
- title: More Bug Fixes
desc: IINA 1.3.5 contains important fixes and improvements to make IINA more stable.
v1.4.0:
- title: Plugin System
desc:
The plugin system allows you to extend IINA's functionality with JavaScript.
You can control the playback, call the mpv API, access the network and file system, adding custom UI elements, and more.
<br><br>
The new <i>Online Media</i> plugin allows you to download online videos while playing them and switch between different video qualities on the fly.
The new <i>OpenSubtitles</i> plugin provides a better experience for searching and downloading subtitles.
<br><br>
Learn more about the plugins and how to write your own at <a href="https://iina.io/plugins">iina.io/plugins</a>.
- title: New Features
desc:
We have added numerous new options to make IINA more user-friendly, including secondary subtitle adjustments,
WebP and JPEG-XL screenshots, Spatial Audio support via the AVFoundation driver, and more.
- title: Bug Fixes and Improvements
desc: IINA 1.4.0 includes a long list of bug fixes and improvements to make IINA more stable.
v1.4.2:
- title: Bug Fixes and Improvements
desc: IINA 1.4.2 includes important fixes to bugs and crashes to make IINA more stable.
================================================
FILE: data/versions.yml
================================================
stable:
- version: 1.4.2
filename: IINA.v1.4.2-build164.dmg
date: 2026-04-16
sha256: 804e3368518f19039ebfbc3d698e1fabc9cd20f15fc4e42de635456cdf6a7f58
system_x86: macOS 10.15
system_arm: macOS 12.0
- version: 1.4.1
date: 2025-09-25
sha256: 177ad469ea129bed95a82ac59b5fb58d0a06c35342fca7a37dba214a8821f848
system_x86: macOS 10.15
system_arm: macOS 12.0
- version: 1.4.0
date: 2025-09-14
sha256: 4b9807c88d5d41caa635f0a408323ae3d80a3305476698ac2da4726136a481b8
system_x86: macOS 10.15
system_arm: macOS 12.0
- version: 1.3.5
date: 2024-05-31
sha256: 3b8b9199f41a18c2aa8b30e5824d0c9daccc1d59176832ea650f533fcbdc6a38
system_x86: macOS 10.13
system_arm: macOS 11.0
- version: 1.3.4
date: 2023-12-31
sha256: 7de50f5ad4a2fd5b27bf59a31b2060074c05331c7aafa533ad4adab65028d78c
system_x86: macOS 10.13
system_arm: macOS 11.0
- version: 1.3.3
date: 2023-07-20
sha256: 4b3f6c4bed3bb77dbe29c12bf6d5d0959284afb01c7b59a35fd71a3a27088991
system_x86: macOS 10.13
system_arm: macOS 11.0
- version: 1.3.2
date: 2023-07-07
sha256: ac5e72bf6407595514b327ffbbbf235919f80badbd18126007f8bc62768a1c19
system_x86: macOS 10.13
system_arm: macOS 11.0
- version: 1.3.1
date: 2022-11-06
sha256: c646642a2884cb0516922170e0f6d4990b12b41d6244b08d53f318dbb9518c2f
system_x86: OS X 10.11
system_arm: macOS 11.0
- version: 1.3.0
date: 2022-05-30
sha256: b50c416828005e1eec0dc8066c961efcc389e6be1a5a595541ea62d48d31a391
system_x86: OS X 10.11
system_arm: macOS 11.0
- version: 1.2.0
date: 2021-01-20
sha256: 91b87e80055f097a1cb7a8c91979deb5303315f2067552cbe7387f48bfc42736
system_x86: OS X 10.11
system_arm: macOS 11.0
- version: 1.1.2
date: 2020-11-19
sha256: 783ff165c73839c87cf9fd5f4418b87131063c3be77abc94dfca0585aa992b98
system_x86: OS X 10.11
- version: 1.1.1
date: 2020-11-10
sha256: ae9ac06459c2b9cd160592881c323d3fb3b50a9b70ba89c6f9f1e13df85c6881
system_x86: OS X 10.11
- version: 1.1.0
date: 2020-10-13
sha256: 44346b32137be39f74206181a370dac28ff0ae645d2c809f136f019b11863e27
system_x86: OS X 10.11
- version: 1.0.7
date: 2020-06-12
sha256: 1b1938b3a9640b4c26960aefab1ebe077bfaaf4b7a62ccfce5a7e138c9c56d75
system_x86: OS X 10.11
- version: 1.0.6
date: 2020-01-13
sha256: 51cce921ef52f00df9b474e230f33d5a947c5b6e4d33aac4213a0e07b4b4a246
system_x86: OS X 10.11
- version: 1.0.5
date: 2020-01-06
sha256: 04958c157ee3e71ae822e2ea471f6277b8f2b9b12bb3cc46fd769d9a4f30a05b
system_x86: OS X 10.11
- version: 1.0.4
date: 2019-05-27
sha256: e4e4c6ea67e149a4508beb739a2249e2fc8df99a324f738bdcf75b0d3514ea8e
system_x86: OS X 10.11
- version: 1.0.3
date: 2019-03-31
sha256: 571e4c4d7f93ea3911fbe0fbbf26150801d8abde28f25409a27aeebf404c82bd
system_x86: OS X 10.11
- version: 1.0.2
date: 2019-02-23
sha256: 37b1150073724f588487b6f61649ab73a34dd143dd5730d70d6ee64aa660056a
system_x86: OS X 10.11
- version: 1.0.1
date: 2019-01-14
sha256: d060069db88fe50e8184f6fba61e35dd6c06f8e043cf162f5fb88a4d036e1c23
system_x86: OS X 10.11
- version: 1.0.0
date: 2018-12-25
sha256: 1af6892fa41b95dd5c0d42be0cfb2dccd52522f716da0b8951a8e87f8e8d4f91
system_x86: OS X 10.11
- version: 0.0.15.1
date: 2018-04-29
sha256: 14ed0c7a301f2b5806c23d0e05e1006a82a23c41da9e3a0662f042bd39f15529
system_x86: OS X 10.10
- version: 0.0.15
date: 2018-01-12
sha256: 5492a131654eaaed1dd5992bde235467c573c994f4c3cd747f96aa7f26b2f33d
system_x86: OS X 10.10
- version: 0.0.14.1
date: 2017-10-24
sha256: 87d04d497e8a4cad7129877e41244248e795593dfbd0a1c8cee086142993c0f1
system_x86: OS X 10.10
- version: 0.0.14
date: 2017-10-17
sha256: 0b0de3238fde6cef6afd82993eb08ea6fa567c786f6fab67ab3346b2e2c7fc3b
system_x86: OS X 10.10
- version: 0.0.13
date: 2017-10-15
sha256: 7f7886555227fff45b05d3a48ff31c4e70a1c778695f829e747ad4af35342668
system_x86: OS X 10.10
beta:
- version: 1.4.0-beta1
date: 2024-04-09
sha256: 65a8b78468d17b6c60ee5fa284881dc799b1a6f62d32ed315a0933d43fed46a4
system_x86: macOS 10.15
system_arm: macOS 12.0
- version: 1.1.0-beta2
date: 2020-10-07
sha256: 11f1f22c2b5fb8e6adc338d7122d37f44a1bb73a7d3a4fc3067d5651cfa2a833
- version: 1.1.0-beta1
date: 2020-09-02
sha256: abafde4a187403721ad0bb2240a855b2e8c6d0d294ca8e8c3a896bee1e095587
- version: 1.0.7-beta2
date: 2020-04-13
sha256: 562035b11d648126149ee9f47185ff4665c529c4acd138317d3f6535c31a14f0
- version: 1.0.7-beta1
date: 2020-03-01
sha256: 53ff2ba27711e46c6e70c5b8cca9cdec2476db821eb39e18fb41dfd7be61d1ff
- version: 1.0.0-rc
date: 2018-12-02
sha256: 40fb3442705e8ca1ab27c16e6dbdab9d41f926e4eeecb65c8f7829196b9cb863
- version: 1.0.0-beta4
date: 2018-09-10
sha256: 1cf47942a3b89d0654034edcfc1c08ba57a76b4fc616c18944ba171e2e84a08b
================================================
FILE: helpers/download_helper.rb
================================================
def filter(version_list, arch)
supported = version_list.reject { |v| v.public_send(arch).to_s.empty? }
result = []
last_value = nil
supported.each do |v|
current_value = v.public_send(arch)
next if current_value == last_value
result << v
last_value = current_value
end
result
end
================================================
FILE: locales/en.yml
================================================
---
en:
home: Home
features: Features
translation: Translation
downloads: Downloads
github: GitHub
release_note: Release Note
headline_1: The
headline_2: modern
headline_3: media player for macOS.
download: Download
plugins: Plugins
requirement: Requires %{min_version_arm} for Apple Sillicon Macs, and %{min_version_x86} for Intel Macs
download_beta: Download beta releases or nightly builds
macos_header: For and only for modern macOS.
macos_desc: IINA is born to be a modern macOS application, from its framework to the user interface. It adopts the post-Yosemite design language of macOS and keeps up the pace of new technologies like Force Touch, Touch Bar, and Picture-in-Picture.
macos_dark_mode: Dark Mode
macos_dark_mode_desc: IINA ships with a carefully crafted user interface for the macOS Mojave dark mode, which includes adjusted colors, icons and textures, providing a sleek and unified look.
macos_pip: Picture-in-Picture
macos_pip_desc: IINA supports the native Picture-in-Picture mode, enables you to enjoy either local or online videos without being distracted.
more_features: More Features
playback_header: Plays anything.
highlights_title: Highlights in IINA v%{version}
================================================
FILE: locales/zh-Hans.yml
================================================
---
zh-Hans:
home: 主页
features: 功能
downloads: 下载
github: GitHub
================================================
FILE: package.json
================================================
{
"name": "iina-website",
"version": "1.0.0",
"description": "The source code of IINA's website.",
"license": "MIT",
"dependencies": {
"bootstrap": "^4.6.2",
"dart-sass": "^1.25.0",
"jquery": "^3.7.1",
"popper.js": "^1.16.1",
"sass": "^1.44.0"
},
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-brands-svg-icons": "^6.5.2",
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"css-loader": "^5",
"mini-css-extract-plugin": "^1",
"postcss-loader": "^3.0.0",
"precss": "^3.1.2",
"sass-loader": "^10",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
},
"scripts": {
"start": "webpack --mode=development --watch --progress --color",
"build": "webpack --mode=production --bail -p"
}
}
================================================
FILE: source/_footer.slim
================================================
footer
.container
.contact.mb-2.d-flex.justify-content-between
.left
span
= "©2018-#{Date.today.year} iina.io"
.right
span.fas.fa-envelope.mr-2
span
javascript:
var addr = 'develo' + 'per'+ 's@ii' + 'na.io';
document.write('<a href="mailto:' + addr + '">' + addr + '</a>');
hr
.source
| You can find the source code of this website on
= link_to 'GitHub', 'https://github.com/iina/iina-website'
| .
.contribute
| If you are interested in translating this website to your language, please feel free to contact us.
.attribution
markdown:
This website contains icons from [Font Awesome](https://fontawesome.com/) licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).
================================================
FILE: source/_header.slim
================================================
- nav_items = [[:home, '/'], [:features, '/features'], [:download, '/download'], [:github, 'https://github.com/iina/iina', 'github']]
#header
nav.navbar.navbar-light.navbar-expand-sm
= link_to '/', class: 'navbar-brand' do
= image_tag "iina-icon-60.png", alt: "Home"
span.ml-2 IINA
- if plugin_doc?
| Plugin Documentation
button.navbar-toggler aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"
span.fas.fa-bars
#navbarSupportedContent.collapse.navbar-collapse
ul.navbar-nav.ml-auto
/li.nav-item
= link_to localized_path('/'), class: 'nav-link' do
= t(:home)
li.nav-item
= link_to localized_path('/plugins'), class: 'nav-link' do
span class=("fas fa-cube")
= t(:plugins)
li.nav-item
= link_to 'https://translate.iina.io', class: 'nav-link', target: '_blank' do
span class=("fas fa-globe-americas")
= t(:translation)
li.nav-item
= link_to localized_path('/download'), class: 'nav-link stressed left' do
span class=("fas fa-cloud-download-alt")
= t(:downloads)
li.nav-item
= link_to 'https://github.com/iina/iina', class: 'nav-link stressed right' do
span class=("fab fa-github")
= t(:github)
================================================
FILE: source/highlights-template.html.slim
================================================
---
layout: highlights
---
.deco
.page
h1 = I18n.t(:highlights_title, version: version)
.highlights-container
- items = data.highlights["v#{version}"]
- items.each_with_index do |h, i|
- if h[:more]
p == h[:more]
- else
- img_class = h[:image] ? (h[:image_pos] || 'right') : 'none'
.highlight-item class="image-#{img_class}"
.content
h4
span = h[:title]
p = h[:desc]
- if h[:image]
.image
.image-container style="width:#{h[:image_width]}px"
= image_tag "#{version}/#{h[:image]}"
- unless items.length == i + 1
.separator
.highlights-more
= link_to release_note_link(version), class: 'release-note-link', target: '_blank' do
| Full release notes >
/ input#expand type="checkbox"
/ label.release-note-link for="expand"
/ | Full release notes
/ .release-note-container
/ iframe.rn-frame src=(release_note_link(version)) frameborder="0"
/ javascript:
/ function fit() {
/ var ifrm = document.querySelectorAll("iframe.rn-frame")[0]
/ if (!ifrm) {
/ requestAnimationFrame(fit)
/ return;
/ }
/ var win = ifrm.contentWindow
/ var doc = win.document
/ var html = doc.documentElement
/ var body = doc.body
/ if(body) {
/ body.style.overflowY = "hidden"
/ }
/ if(html) {
/ html.style.overflowY = "hidden"
/ var style = win.getComputedStyle(html)
/ ifrm.height = ifrm.parentNode.style.height = parseInt(style.getPropertyValue("height"))
/ }
/ }
/ window.addEventListener("load", requestAnimationFrame.bind(this, fit))
================================================
FILE: source/images/.keep
================================================
================================================
FILE: source/images/site.webmanifest
================================================
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/images/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
================================================
FILE: source/layouts/highlights.slim
================================================
doctype html
html
head
meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /
meta charset="utf-8" /
meta content="ie=edge" http-equiv="x-ua-compatible" /
meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" /
title = current_page.data.title || "IINA"
= stylesheet_link_tag "highlights"
/ assets
body class=(current_page.data.html_class)
#main
= yield
================================================
FILE: source/layouts/layout.slim
================================================
doctype html
html
head
meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /
meta charset="utf-8" /
meta content="ie=edge" http-equiv="x-ua-compatible" /
meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" /
title = current_page.data.title || "IINA"
/ favicons
link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"
link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"
link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"
link rel="manifest" href="/images/site.webmanifest"
link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5"
meta name="msapplication-TileColor" content="#da532c"
meta name="theme-color" content="#ffffff"
/ assets
link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700&subset=latin-ext" rel="stylesheet"
= stylesheet_link_tag "site"
= javascript_include_tag "site"
body class=(current_page.data.html_class)
= partial "header"
- if plugin_doc?
#main
#doc-index
= partial 'plugin/documentation/plugin-doc-index'
#doc-body
= yield
- else
#main
= yield
= partial "footer"
================================================
FILE: source/localizable/download.html.slim
================================================
---
title: Download | IINA - The modern media player for macOS
html_class: download
---
section#downloads.downloads
.container
h2.mb-4 Downloads
- latest = data.versions.stable.first
- latest_beta = data.versions.beta.first
.dl-card
h5 Stable releases
.text-center.py-2
.text-muted.font-weight-bold.mb-2
| Latest stable release
= link_to download_link(latest), class: 'btn btn-primary stable-btn' do
= latest.version
.text-muted.small.mt-2
| Released on
= latest.date
= link_to release_note_link(latest.version), class: 'release-note ml-2', target: '_blank' do
= t(:release_note)
.text-muted.small.mt-2
= I18n.t(:requirement, min_version_arm: data.versions.stable.first.system_arm, min_version_x86: data.versions.stable.first.system_x86)
.text-muted.small.mt-2.break-all
| SHA256:
= latest.sha256
.small
a href="#how-to-verify" data-toggle="collapse" How to verify the integrity of the downloaded file?
#how-to-verify.collapse.pt-4
p
| Run the following command in Terminal and check if the output matches the SHA256 value above.
br
| You may need to replace the file path with the actual path of the downloaded file.
pre.bg-light
= "shasum -a 256 ~/Downloads/IINA.v#{latest.version}.dmg"
hr.my-4
.mb-2
a href="#more-downloads" data-toggle="collapse" Previous versions
#more-downloads.collapse
.tables-container.text-muted.small
.table-box
h6.text-center For Apple Silicon Macs
table
thead
tr
th Version
th Release Date
th System Requirement
th Release Notes
tbody
- filter(data.versions.stable, :system_arm).drop(1).each do |c|
tr
td = link_to c.version, download_link(c)
td = c.date
td = c.system_arm
td = link_to 'Link', release_note_link(c.version)
.table-box
h6.text-center For Intel Macs
table
thead
tr
th Version
th Release Date
th System Requirement
th Release Notes
tbody
- filter(data.versions.stable, :system_x86).drop(1).each do |c|
tr
td = link_to c.version, download_link(c)
td = c.date
td = c.system_x86
td = link_to 'Link', release_note_link(c.version)
a.small href="#full-list" data-toggle="collapse" Show full list
#full-list.collapse
.tables-container.text-muted.small
table
thead
tr
th Version
th Release Date
th System Requirement (arm)
th System Requirement (x86)
th Release Notes
tbody
- data.versions.stable.drop(1).each do |c|
tr
td = link_to c.version, download_link(c)
td = c.date
td = c.system_arm
td = c.system_x86
td = link_to 'Link', release_note_link(c.version)
.dl-card
h5 Beta releases
p.text-muted
| If you already have IINA installed, you can change to beta channel by
checking the "Receive beta updates" button in Preferences.
a href="#beta-downloads" data-toggle="collapse" Show downloads
#beta-downloads.collapse
.text-center.py-2
.text-muted.font-weight-bold.mb-2
| Latest beta release
= link_to download_link(latest_beta), class: 'btn btn-secondary beta-btn', target: '_blank' do
= latest_beta.version
.text-muted.small.mt-2
| Released on
= latest_beta.date
.text-muted.small.mt-2
= I18n.t(:requirement, min_version_arm: data.versions.beta.first.system_arm, min_version_x86: data.versions.beta.first.system_x86)
.text-muted.small.mt-2
| SHA256:
= latest_beta.sha256
section#install-homebrew.mt-5
.container
h5 Install via Homebrew Cask
p.text-muted
| You may also install IINA via the community-maintained
= link_to 'Homebrew', 'https://brew.sh/'
| cask by running:
pre.bg-light.p-2.text-center
| brew install --cask iina
section#browser-extensions.mt-5
.container
h5 Browser extensions
p.text-muted
| You can open various online media in IINA directly from web browsers by using our browser extensions.
p.text-muted
| The Safari App Extension is already included in the IINA App bundle, and you may only need to enable it in Safari Preferences. Extensions for other browsers could be downloaded below.
.btn-group
= link_to 'https://chrome.google.com/webstore/detail/open-in-iina/pdnojahnhpgmdhjdhgphgdcecehkbhfo', class: 'btn btn-secondary' do
.span.fab.fa-chrome
| Chrome
= link_to 'https://addons.mozilla.org/addon/open-in-iina-x', class: 'btn btn-secondary' do
.span.fab.fa-firefox
| Firefox
section#nightly-builds.mt-5
.container
h5 Nightly builds
p.text-muted
| Nightly builds are built by GitHub Actions based on each new commit on the develop branch. They are not signed so you need to manually change your system security settings to use nightly builds.
div
= link_to 'Nightly Builds', '/nightly', class: 'btn btn-primary'
================================================
FILE: source/localizable/features.html.slim
================================================
---
title: Features | IINA - The modern media player for macOS
html_class: features
---
section.nav
.container
.nav-container
h2 Features
section.features
.container
.features-container
.feature-block.half
.feature-content
.feature-img
= image_tag 'feature-sidebar.png', alt: 'Sidebar'
h4 Access all you need from the sidebar.
p All settings and options are available in the sidebar so you can adjust them in an intuitive way.
.feature-block.half
.feature-content
.feature-img
= image_tag 'feature-control.png', alt: 'Control'
h4 Make full use of your mouse and trackpad.
p IINA allows you to assign actions for mouse scrolling and click events, trackpad gestures or even Force Touch clicks.
.feature-block.full
.feature-content
h4 Highly customizable user interface.
p IINA provides 2 themes that match the system and 3 different layouts for the control bar.
.segment-control.toggle-dark
.segment.active data-choice="light" Light + Top
.segment data-choice="dark" Dark + Floating
.content.light
.feature-img
= image_tag 'feature-light.png', alt: 'Light + Top'
.content.dark
.feature-img
= image_tag 'feature-dark.png', alt: 'Dark + Floating'
.feature-block.half
.feature-content
.feature-img
= image_tag 'feature-touchbar.png', alt: 'Touch Bar'
h4 Touch Bar support.
p Advanced Touch Bar support including a QuickTime-like seek preview.
.feature-block.half
.feature-content
.feature-img
= image_tag 'feature-pip.png', alt: 'Picture-in-Picture'
h4 Picture-in-Picture.
p IINA integrates the native Picture-in-Picture mode of macOS.
.feature-block.half
.feature-content
.feature-img
= image_tag 'feature-thumbnail.png', alt: 'Thumbnail preview'
h4 Thumbnail preview.
p IINA generates thumbnail for the whole timeline. You can preview at any time point just like YouTube.
.feature-block.half
.feature-content
.feature-img
= image_tag 'feature-crop.png', alt: 'Interactive Crop'
h4 Interactive cropping and selection.
p The interactive mode makes it easy to select an arbitrary region on the video. You can crop the selected region afterward, or apply a delogo filter to hide watermarks or hard-coded subtitles.
.feature-block.full
.feature-content.mmode
h4 Music mode.
p Though IINA is developed to be a video player, it also features a graceful music mode, allowing you to concentrate on music with additional information such as album artworks and artist names around. You can hide the album artwork and the playlist panel to obtain a minimal UI, or with all of them expanded to make it a fully functional music player.
.feature-block.half
.feature-content
h4 Superme decoding capability.
p Powered by mpv, IINA delivers the best decoding performance on macOS.
================================================
FILE: source/localizable/index.html.slim
================================================
---
title: IINA - The modern media player for macOS
html_class: index
---
section.title
.background
svg width="100%" height="100%" viewBox="0 0 1200 800"
circle cx=100 cy=120 r=500 fill="#42b0ff" fill-opacity=0.05
circle cx=900 cy=620 r=140 fill="#ff4294" fill-opacity=0.05
circle cx=360 cy=840 r=360 fill="#ff9142" fill-opacity=0.05
circle cx=1000 cy=180 r=180 fill="#42ff91" fill-opacity=0.05
.container.position-relative
.sample-image
= image_tag "sc-sky.png", alt: "Screenshot"
.small-headline = "/ˈiːnə/"
h1.headline
| IINA
p.sub-headline
= t(:headline_1)
|
span.modern = t(:headline_2)
|
= t(:headline_3)
.plugin-pr
.plugin-pr-content
h6
span.fas.fa-cube
| Now with the plugin system
.plugin-pr-links
= link_to localized_path('/plugins'), class: 'pr-link' do
span.fas.fa-angle-right
| Learn more
.download
= link_to 'https://github.com/iina/iina', class: 'dl-btn github' do
span.fab.fa-github
| GitHub
span.light GPLv3
/ br
- latest = data.versions.stable.first
= link_to download_link(latest), class: 'dl-btn dmg' do
span.fas.fa-cloud-download-alt
|
= t(:download)
span.light v#{latest.version}
p.requirement
= I18n.t(:requirement, min_version_arm: data.versions.stable.first.system_arm, min_version_x86: data.versions.stable.first.system_x86)
p.other-downloads
= link_to t(:download_beta), localized_path('/download')
section.highlight.highlight--macos
.container
h2 = t(:macos_header)
p = t(:macos_desc)
.highlight-features
.item.item--forcetouch
.left
.decoration-line
.item-name.bg-1 = t(:macos_dark_mode)
.item-desc = t(:macos_dark_mode_desc)
.right
.item-img
= image_tag "feature-1.png", width: 800
.item.item--pip.reversed
.right
.decoration-line
.item-name.bg-3 = t(:macos_pip)
.item-desc = t(:macos_pip_desc)
.left
.item-img
= image_tag "feature-2.png", width: 800
.more-features
h4 = t(:more_features)
.features
.left.bg-large-l
| Touch Bar
br
| System Media Control
br
| Customizable UI
br
| Online Subtitles
.right.bg-large-r
| Music Mode
br
| Mouse & Trackpad Gestures
br
| Thumbnail Preview
br
| Plugin System
= link_to'#', class: 'highlight-link' do
div Screenshots
.comming-soon Coming soon
section.highlight.highlight--playback
.background
svg width="100%" height="100%" viewBox="0 0 1200 800"
circle cx=150 cy=200 r=120 fill="#99e1d0" fill-opacity=0.03
circle cx=450 cy=700 r=180 fill="#99e1d0" fill-opacity=0.03
circle cx=1100 cy=80 r=500 fill="#42b0ff" fill-opacity=0.05
g transform="translate(1100,120)"
path d="M-150,220 L-150,-220 L300,0 z" fill="#fff" fill-opacity=0.03
.container
.content
h2 = t(:playback_header)
markdown:
Powered by the open source media player mpv, IINA can play almost every media file you have.
With the support of youtube-dl and our browser extensions, you can also play a variety of online streams in IINA via one click.
.items.mb-4
.item
.item-icon
span.fas.fa-file-video.fa-2x.m-0
.item-text Local files
.item
.item-icon
span.fas.fa-globe-americas.fa-2x.m-0
.item-text Online streams
.item
.item-icon
span.fab.fa-youtube.fa-2x.m-0
.item-text YouTube playlists
.content
= link_to localized_path('/download#browser-extensions') do
| Download browser extensions
span.fas.fa-angle-right.ml-2
section.highlight.highlight--opensource
.container
.swift-bg
= image_tag "swift.svg"
.content
h2 Free, open source, in active development.
.row
.col-sm
p
|
Written in the Swift programming language, IINA is free and open-sourced under the GPLv3 license.
Please feel free to contribute to it by opening an issue, sending a feature request or a bug report on GitHub or by email.
= link_to 'https://github.com/iina/iina', class: 'highlight-link' do
span.fab.fa-github
span.mr-2 GitHub repository
span.fa.fa-angle-right
.col-sm
p
|
IINA has been translated into more than 20 languages by translators from all over the world.
You can improve the translation or add your new language freely via our translation platform
small
| (powered by Crowdin)
| .
= link_to 'https://translate.iina.io', class: 'highlight-link', target: '_blank' do
span.fas.fa-globe
span.mr-2 Translation platform
span.fa.fa-angle-right
/== render '/_contribution.*'
================================================
FILE: source/localizable/nightly.html.slim
================================================
---
title: Nightly Download | IINA - The modern media player for macOS
html_class: download
---
section#downloads.downloads
section#nightly-builds
.container
h2 Nightly builds
.alert.alert-info.mt-4.mb-4
| Nightly builds are built by GitHub Actions based on each new commit on the develop branch.
strong You may need to login on GitHub to download a nightly build.
| They are not signed, so you need to manually change your system security settings to use nightly builds.
p
markdown:
This page fetches the latest builds using GitHub API. You can visit
[GitHub Actions](https://github.com/iina/iina/actions) for more information and builds.
.nightly-builds-list
table.table.small
thead
th Built at
th Available
th Commit Message
th Author
th SHA
th Download
tbody#table-body
================================================
FILE: source/localizable/plugins/index.html.slim
================================================
---
title: Plugin System | IINA - The modern media player for macOS
html_class: plugin
---
section#overview
.background
.cube.lg style="left: 0%; top: -40px;"
.cube.lg.h style="left: 20%; top: -40px;"
.cube.lg style="left: 40%; top: -40px;"
.cube.lg.h style="left: 60%; top: -40px;"
.cube.lg style="left: 80%; top: -40px;"
.cube.lg.h style="left: 100%; top: -40px;"
.cube.md.h style="left: 10%; top: 40px;"
.cube.md style="left: 30%; top: 40px;"
.cube.md.h style="left: 50%; top: 40px;"
.cube.md style="left: 70%; top: 40px;"
.cube.md.h style="left: 90%; top: 40px;"
.cube.sm.h style="left: 0%; top: 110px;"
.cube.sm style="left: 20%; top: 110px;"
.cube.sm.h style="left: 40%; top: 110px;"
.cube.sm style="left: 60%; top: 110px;"
.cube.sm.h style="left: 80%; top: 110px;"
.cube.sm style="left: 100%; top: 110px;"
.container
h1 Plugin System
.pt-4
markdown:
The plugin system allows you to extend IINA's functionality with JavaScript.
You can control the playback, call the mpv API, access the network and file system,
adding custom UI elements, and more. The plugin system is available in IINA 1.4.0.
section#demo
.container
h4 Concise API, powerful features
.pt-4
markdown:
With several lines of code, you can implement the exact feature tailored to your needs.
Furthermore, with the Official _User Scripts_ plugin, you can just copy-and-paste code snippets into IINA without writing plugin packages.
.row
.col
pre style="font-family:monospace;color: rgb(201, 209, 217); background-color: rgb(13, 17, 23); font-weight: 400; "
<span style="color: rgb(255, 123, 114); font-weight: 400;">const</span> { core, event, overlay } = iina;
<br><span>event.</span><span style="color: rgb(210, 168, 255); font-weight: 400;">on</span>(<span style="color: rgb(165, 214, 255); font-weight: 400;">"iina.file-loaded"</span>, <span style="color: rgb(201, 209, 217); font-weight: 400;">() =></span> {
<br><span> overlay.</span><span style="color: rgb(210, 168, 255); font-weight: 400;">simpleMode</span>();
<br><span> overlay.</span><span style="color: rgb(210, 168, 255); font-weight: 400;">setContent</span>(<span style="color: rgb(165, 214, 255); font-weight: 400;">`<p><span style="color: rgb(201, 209, 217); font-weight: 400;">${core.status.title}</span></p>`</span>);
<br><span> overlay.</span><span style="color: rgb(210, 168, 255); font-weight: 400;">setStyle</span>(<span style="color: rgb(165, 214, 255); font-weight: 400;">`p { font-size: 48px; }`</span>);
<br><span> overlay.</span><span style="color: rgb(210, 168, 255); font-weight: 400;">show</span>();
<br><span>})</span>
.description
| Display the video title in a large font on the top of the video
.col
pre style="font-family:monospace;color: rgb(201, 209, 217); background-color: rgb(13, 17, 23); font-weight: 400; "
<span style="color: rgb(255, 123, 114); font-weight: 400;">const</span> { core, event } = iina;
<br><span>event.</span><span style="color: rgb(210, 168, 255); font-weight: 400;">on</span>(<span style="color: rgb(165, 214, 255); font-weight: 400;">"mpv.pause.changed"</span>, <span style="color: rgb(201, 209, 217); font-weight: 400;">() =></span> {
<br><span> core.</span><span style="color: rgb(201, 209, 217); font-weight: 400;">window</span>.<span style="color: rgb(201, 209, 217); font-weight: 400;">miniaturized</span> = <span>core.status.paused</span>;
<br><span>});</span>
<br><span>event.</span><span style="color: rgb(210, 168, 255); font-weight: 400;">on</span>(<span style="color: rgb(165, 214, 255); font-weight: 400;">"iina.window-deminiaturized"</span>, <span style="color: rgb(201, 209, 217); font-weight: 400;">() =></span> {
<br><span> core.</span><span style="color: rgb(210, 168, 255); font-weight: 400;">resume</span>();
<br><span>});</span>
.description
| Minimize the window when the video is paused, and resume when restored
section#modules
.container
h4 What you can do with the plugin system
.modules
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-cube
span Core
.module-desc
| Control the playback and get/set various status from the window frame to subtitle tracks.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-play-circle
span MPV
.module-desc
| Access the mpv API with properties and hooks for advanced playback control.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-broadcast-tower
span Event
.module-desc
| Register and remove listeners for IINA and mpv events.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-globe
span HTTP
.module-desc
| Make HTTP and XMLRPC requests.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-list
span Playlist
.module-desc
| Control the playlist and add custom playlist context menu items.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-comment-dots
span Subtitle
.module-desc
| Register custom subtitle downloaders that integrates with IINA's user interface.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-bars
span Menu
.module-desc
| Add menu items with keyboard shortcuts under the Plugin menu.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-layer-group
span Overlay
.module-desc
| Render custom webview-based content on the top of videos.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-columns
span Sidebar View
.module-desc
| Add a tab in the sidebar with custom webview-based contents.
.module-wrapper
.module-container
.module-name
.far.fa-fw.fa-window-restore
span Standalone Window
.module-desc
| Display a webview-based standalone window for complicated user interface.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-sitemap
span Global Controller
.module-desc
| Spawn and control multiple player instances.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-file-alt
span File
.module-desc
| Access the user file system or read/write sandboxed temporary files and data files.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-cog
span Preferences
.module-desc
| Store preferences and display a settings page in IINA's preferences panel.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-tools
span Utils
.module-desc
| Display system dialogs and run custom executables.
.module-wrapper
.module-container
.module-name
.fas.fa-fw.fa-terminal
span Console
.module-desc
| Print logs for debugging, viewable from IINA's log viewer.
section#resources
.container
h4 Start building your plugin
.my-4
markdown:
An `iina-plugin` command line tool is included with the IINA installation to help you create, build, and run plugins.
We have also prepared a complete documentation with tutorials and API references.
a.btn.btn-primary href='https://docs.iina.io/index.html' target='_blank'
| Read the documentation
.small at docs.iina.io
.my-4
markdown:
You may also find these resources helpful:
- [Official User Scripts plugin](https://github.com/iina/iina-plugin-userscript):
simply enter `iina/iina-plugin-userscript` when installing.
- [TypeScript definitions](https://github.com/iina/iina-plugin-definition):
TypeScript definitions for the plugin API. It is included automatically when you create a new plugin with the `iina-plugin` command line tool.
================================================
FILE: webpack.config.js
================================================
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const cssLoaders = [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader?url=false", // translates CSS into CommonJS modules
},
{
loader: "postcss-loader", // Run post css actions
options: {
plugins: function () {
// post css plugins, can be exported to postcss.config.js
return [require("precss"), require("autoprefixer")];
},
},
},
];
module.exports = {
entry: {
site: ["./assets/javascripts/index.js", "./assets/stylesheets/index.sass"],
highlights: ["./assets/stylesheets/highlights.sass"],
},
output: {
filename: "assets/javascripts/[name].js",
path: path.resolve(__dirname, "tmp/dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: cssLoaders,
},
{
test: /\.s(a|c)ss$/,
use: [
...cssLoaders,
{
loader: "sass-loader", // compiles Sass to CSS
},
],
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
plugins: [new MiniCssExtractPlugin()],
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
gitextract_omxa2yr8/ ├── .gitignore ├── .ruby-version ├── .vimrc ├── Gemfile ├── LICENSE ├── README.md ├── assets/ │ ├── javascripts/ │ │ └── index.js │ └── stylesheets/ │ ├── _bootstrap.sass │ ├── _download.sass │ ├── _features.sass │ ├── _index.sass │ ├── _plugin.sass │ ├── _utils.sass │ ├── _variables.scss │ ├── highlights.sass │ └── index.sass ├── config.rb ├── data/ │ ├── highlights.yml │ └── versions.yml ├── helpers/ │ └── download_helper.rb ├── locales/ │ ├── en.yml │ └── zh-Hans.yml ├── package.json ├── source/ │ ├── _footer.slim │ ├── _header.slim │ ├── highlights-template.html.slim │ ├── images/ │ │ ├── .keep │ │ └── site.webmanifest │ ├── layouts/ │ │ ├── highlights.slim │ │ └── layout.slim │ └── localizable/ │ ├── download.html.slim │ ├── features.html.slim │ ├── index.html.slim │ ├── nightly.html.slim │ └── plugins/ │ └── index.html.slim └── webpack.config.js
SYMBOL INDEX (13 symbols across 3 files)
FILE: assets/javascripts/index.js
function formatDate (line 89) | function formatDate(str) {
function load_nightly (line 93) | async function load_nightly() {
function fetch_artifacts (line 142) | async function fetch_artifacts() {
function fetch_commits (line 149) | async function fetch_commits(sha) {
FILE: config.rb
class HTMLWithHighlight (line 7) | class HTMLWithHighlight < Redcarpet::Render::HTML
function localized_path (line 59) | def localized_path(path)
function download_link (line 68) | def download_link(definition)
function release_note_link (line 76) | def release_note_link(version)
function plugin_doc? (line 80) | def plugin_doc?
function doc_api_title (line 84) | def doc_api_title(api)
function doc_api_type (line 97) | def doc_api_type(api)
function render_markdown (line 106) | def render_markdown(str)
FILE: helpers/download_helper.rb
function filter (line 1) | def filter(version_list, arch)
Condensed preview — 36 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (124K chars).
[
{
"path": ".gitignore",
"chars": 2848,
"preview": "\n# Created by https://www.gitignore.io/api/ruby,node,sass,macos\n# Edit at https://www.gitignore.io/?templates=ruby,node,"
},
{
"path": ".ruby-version",
"chars": 6,
"preview": "3.3.1\n"
},
{
"path": ".vimrc",
"chars": 238,
"preview": "autocmd FileType ruby setlocal shiftwidth=2 softtabstop=2\nautocmd FileType slim setlocal shiftwidth=4 softtabstop=4\nauto"
},
{
"path": "Gemfile",
"chars": 249,
"preview": "source 'https://rubygems.org'\n\ngem 'middleman', '~> 4.5'\ngem 'middleman-autoprefixer', '~> 3.0'\ngem 'tzinfo-data', platf"
},
{
"path": "LICENSE",
"chars": 1072,
"preview": "MIT License\n\nCopyright (c) 2018 IINA Developers\n\nPermission is hereby granted, free of charge, to any person obtaining a"
},
{
"path": "README.md",
"chars": 695,
"preview": "# iina-website\n\nThe source code of IINA's new website at iina.io.\n\n## How to build\n\nThis site is powered by the static s"
},
{
"path": "assets/javascripts/index.js",
"chars": 5218,
"preview": "import * as $ from \"jquery\";\nimport \"popper.js\";\nimport \"bootstrap\";\n\nimport { library, dom } from \"@fortawesome/fontawe"
},
{
"path": "assets/stylesheets/_bootstrap.sass",
"chars": 103,
"preview": "@import \"~bootstrap/scss/_functions.scss\"\n@import \"variables\"\n@import \"~bootstrap/scss/bootstrap.scss\"\n"
},
{
"path": "assets/stylesheets/_download.sass",
"chars": 787,
"preview": "@import \"variables\"\n\n.downloads\n padding: 2rem 0\n .dl-card\n margin: 1rem 0\n padding: 2rem\n //"
},
{
"path": "assets/stylesheets/_features.sass",
"chars": 2938,
"preview": ".nav\n padding: 1rem 0 1.5rem 0\n .nav-container\n h2\n margin: 1rem 0 0.5rem 0\n\n.features\n paddi"
},
{
"path": "assets/stylesheets/_index.sass",
"chars": 7646,
"preview": "@import \"./variables\"\n@import \"./utils\"\n\np\n line-height: 1.4\n\nsection\n overflow: hidden\n\n.title\n position: rela"
},
{
"path": "assets/stylesheets/_plugin.sass",
"chars": 2015,
"preview": "@import \"variables\"\n\n.cube\n position: absolute\n background: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/"
},
{
"path": "assets/stylesheets/_utils.sass",
"chars": 651,
"preview": "=font-family-system\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
},
{
"path": "assets/stylesheets/_variables.scss",
"chars": 33699,
"preview": "// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $n"
},
{
"path": "assets/stylesheets/highlights.sass",
"chars": 3703,
"preview": "$main: #276ad8\n$main-light: #45a2ff\n\n@import \"utils\"\n\n\\:root\n color-scheme: light dark\n --bg-color: #fff\n --sub"
},
{
"path": "assets/stylesheets/index.sass",
"chars": 3032,
"preview": "@import \"bootstrap\"\n\nhtml, body\n margin: 0\n padding: 0\n\nhtml\n +media-breakpoint-down(md)\n font-size: 15p"
},
{
"path": "config.rb",
"chars": 3085,
"preview": "# Activate and configure extensions\n# https://middlemanapp.com/advanced/configuration/#configuring-extensions\n\nrequire '"
},
{
"path": "data/highlights.yml",
"chars": 5796,
"preview": "v1.1.0:\n - title: New Icons\n desc: We have updated the icons in the on-screen controller to provide a better user ex"
},
{
"path": "data/versions.yml",
"chars": 4996,
"preview": "stable:\n - version: 1.4.2\n filename: IINA.v1.4.2-build164.dmg\n date: 2026-04-16\n sha256: 804e3368518f19039ebfb"
},
{
"path": "helpers/download_helper.rb",
"chars": 310,
"preview": "def filter(version_list, arch)\n supported = version_list.reject { |v| v.public_send(arch).to_s.empty? }\n result = []\n "
},
{
"path": "locales/en.yml",
"chars": 1235,
"preview": "---\nen:\n home: Home\n features: Features\n translation: Translation\n downloads: Downloads\n github: GitHub\n release_n"
},
{
"path": "locales/zh-Hans.yml",
"chars": 72,
"preview": "---\nzh-Hans:\n home: 主页\n features: 功能\n downloads: 下载\n github: GitHub\n"
},
{
"path": "package.json",
"chars": 1049,
"preview": "{\n \"name\": \"iina-website\",\n \"version\": \"1.0.0\",\n \"description\": \"The source code of IINA's website.\",\n \"license\": \"M"
},
{
"path": "source/_footer.slim",
"chars": 974,
"preview": "footer\n .container\n .contact.mb-2.d-flex.justify-content-between\n .left\n span\n "
},
{
"path": "source/_header.slim",
"chars": 1493,
"preview": "- nav_items = [[:home, '/'], [:features, '/features'], [:download, '/download'], [:github, 'https://github.com/iina/iina"
},
{
"path": "source/highlights-template.html.slim",
"chars": 1707,
"preview": "---\nlayout: highlights\n---\n\n.deco\n.page\n h1 = I18n.t(:highlights_title, version: version)\n .highlights-container\n -"
},
{
"path": "source/images/.keep",
"chars": 0,
"preview": ""
},
{
"path": "source/images/site.webmanifest",
"chars": 374,
"preview": "{\n \"name\": \"\",\n \"short_name\": \"\",\n \"icons\": [\n {\n \"src\": \"/images/android-chrome-192x192.png\",\n \"sizes\":"
},
{
"path": "source/layouts/highlights.slim",
"chars": 481,
"preview": "doctype html\nhtml\n head\n meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" /\n meta char"
},
{
"path": "source/layouts/layout.slim",
"chars": 1447,
"preview": "doctype html\nhtml\n head\n meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" /\n meta char"
},
{
"path": "source/localizable/download.html.slim",
"chars": 6969,
"preview": "---\ntitle: Download | IINA - The modern media player for macOS\nhtml_class: download\n---\n\nsection#downloads.downloads\n "
},
{
"path": "source/localizable/features.html.slim",
"chars": 3786,
"preview": "---\ntitle: Features | IINA - The modern media player for macOS\nhtml_class: features\n---\n\nsection.nav\n .container\n "
},
{
"path": "source/localizable/index.html.slim",
"chars": 6408,
"preview": "---\ntitle: IINA - The modern media player for macOS\nhtml_class: index\n---\n\nsection.title\n .background\n svg wid"
},
{
"path": "source/localizable/nightly.html.slim",
"chars": 1158,
"preview": "---\ntitle: Nightly Download | IINA - The modern media player for macOS\nhtml_class: download\n---\n\nsection#downloads.downl"
},
{
"path": "source/localizable/plugins/index.html.slim",
"chars": 10209,
"preview": "---\ntitle: Plugin System | IINA - The modern media player for macOS\nhtml_class: plugin\n---\n\nsection#overview\n .backgr"
},
{
"path": "webpack.config.js",
"chars": 1506,
"preview": "const path = require(\"path\");\nconst webpack = require(\"webpack\");\nconst MiniCssExtractPlugin = require(\"mini-css-extract"
}
]
About this extraction
This page contains the full source code of the iina/iina-website GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 36 files (115.2 KB), approximately 31.5k tokens, and a symbol index with 13 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.