[ { "path": ".gitignore", "content": "\n# Created by https://www.gitignore.io/api/ruby,node,sass,macos\n# Edit at https://www.gitignore.io/?templates=ruby,node,sass,macos\n\n### macOS ###\n# General\n.DS_Store\n.AppleDouble\n.LSOverride\n\n# Icon must end with two \\r\nIcon\n\n# Thumbnails\n._*\n\n# Files that might appear in the root of a volume\n.DocumentRevisions-V100\n.fseventsd\n.Spotlight-V100\n.TemporaryItems\n.Trashes\n.VolumeIcon.icns\n.com.apple.timemachine.donotpresent\n\n# Directories potentially created on remote AFP share\n.AppleDB\n.AppleDesktop\nNetwork Trash Folder\nTemporary Items\n.apdisk\n\n### Node ###\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n\n# next.js build output\n.next\n\n# nuxt.js build output\n.nuxt\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless\n\n# FuseBox cache\n.fusebox/\n\n### Ruby ###\n*.gem\n*.rbc\n/.config\n/coverage/\n/InstalledFiles\n/pkg/\n/spec/reports/\n/spec/examples.txt\n/test/tmp/\n/test/version_tmp/\n/tmp/\n\n# Used by dotenv library to load environment variables.\n# .env\n\n## Specific to RubyMotion:\n.dat*\n.repl_history\nbuild/\n*.bridgesupport\nbuild-iPhoneOS/\nbuild-iPhoneSimulator/\n\n## Specific to RubyMotion (use of CocoaPods):\n#\n# We recommend against adding the Pods directory to your .gitignore. However\n# you should judge for yourself, the pros and cons are mentioned at:\n# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control\n#\n# vendor/Pods/\n\n## Documentation cache and generated files:\n/.yardoc/\n/_yardoc/\n/doc/\n/rdoc/\n\n## Environment normalization:\n/.bundle/\n/vendor/bundle\n/lib/bundler/man/\n\n# for a library or gem, you might want to ignore these files since the code is\n# intended to run in multiple environments; otherwise, check them in:\n# Gemfile.lock\n# .ruby-version\n# .ruby-gemset\n\n# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:\n.rvmrc\n\n### Sass ###\n.sass-cache/\n*.css.map\n*.sass.map\n*.scss.map\n\n# End of https://www.gitignore.io/api/ruby,node,sass,macos\n" }, { "path": ".ruby-version", "content": "3.3.1\n" }, { "path": ".vimrc", "content": "autocmd FileType ruby setlocal shiftwidth=2 softtabstop=2\nautocmd FileType slim setlocal shiftwidth=4 softtabstop=4\nautocmd FileType sass setlocal shiftwidth=4 softtabstop=4\nautocmd FileType javascript setlocal shiftwidth=4 softtabstop=4\n" }, { "path": "Gemfile", "content": "source 'https://rubygems.org'\n\ngem 'middleman', '~> 4.5'\ngem 'middleman-autoprefixer', '~> 3.0'\ngem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]\ngem 'wdm', '~> 0.1', platforms: [:mswin, :mingw]\n\ngem 'slim', '~>4.0'\ngem 'redcarpet'\ngem 'rouge'\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 IINA Developers\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# 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 site generator [middleman](https://middlemanapp.com).\nTo set up a local development environment,\nplease install front and back-end dependencies by running these commands in the project root directory.\n\nPlease also make sure that you have yarn and ruby/bundler (`gem install bundler`) installed.\n\n```sh\nyarn install\nbundle install\n```\n\nThen \n\n```sh\nbundle exec middleman\n```\n\nto run a local server, or\n\n```sh\nbundle exec middleman build\n```\n\nto generate static files.\n\n## Localization\n\nThis site is not ready for localization yet. We are working on this and please stay tuned.\n" }, { "path": "assets/javascripts/index.js", "content": "import * as $ from \"jquery\";\nimport \"popper.js\";\nimport \"bootstrap\";\n\nimport { library, dom } from \"@fortawesome/fontawesome-svg-core\";\nimport { faCloudDownloadAlt } from \"@fortawesome/free-solid-svg-icons/faCloudDownloadAlt\";\nimport { faGithub } from \"@fortawesome/free-brands-svg-icons/faGithub\";\nimport { faAngleRight } from \"@fortawesome/free-solid-svg-icons/faAngleRight\";\nimport { faBars } from \"@fortawesome/free-solid-svg-icons/faBars\";\nimport { faChrome } from \"@fortawesome/free-brands-svg-icons/faChrome\";\nimport { faFirefox } from \"@fortawesome/free-brands-svg-icons/faFirefox\";\nimport { faYoutube } from \"@fortawesome/free-brands-svg-icons/faYoutube\";\nimport { faEnvelope } from \"@fortawesome/free-solid-svg-icons/faEnvelope\";\nimport { faFileVideo } from \"@fortawesome/free-solid-svg-icons/faFileVideo\";\nimport { faGlobeAmericas } from \"@fortawesome/free-solid-svg-icons/faGlobeAmericas\";\nimport { faGlobe } from \"@fortawesome/free-solid-svg-icons/faGlobe\";\nimport { faWindowRestore } from \"@fortawesome/free-regular-svg-icons/faWindowRestore\";\nimport { faColumns } from \"@fortawesome/free-solid-svg-icons/faColumns\";\nimport { faFileAlt } from \"@fortawesome/free-solid-svg-icons/faFileAlt\";\nimport { faPlayCircle } from \"@fortawesome/free-solid-svg-icons/faPlayCircle\";\nimport { faCube } from \"@fortawesome/free-solid-svg-icons/faCube\";\nimport { faBroadcastTower } from \"@fortawesome/free-solid-svg-icons/faBroadcastTower\";\nimport { faList } from \"@fortawesome/free-solid-svg-icons/faList\";\nimport { faCommentDots } from \"@fortawesome/free-solid-svg-icons/faCommentDots\";\nimport { faLayerGroup } from \"@fortawesome/free-solid-svg-icons/faLayerGroup\";\nimport { faCog } from \"@fortawesome/free-solid-svg-icons/faCog\";\nimport { faTerminal } from \"@fortawesome/free-solid-svg-icons/faTerminal\";\nimport { faTools } from \"@fortawesome/free-solid-svg-icons/faTools\";\nimport { faSitemap } from \"@fortawesome/free-solid-svg-icons/faSitemap\";\nimport { faTimes } from \"@fortawesome/free-solid-svg-icons/faTimes\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons/faCheck\";\n\nlibrary.add(\n faCloudDownloadAlt,\n faGithub,\n faAngleRight,\n faBars,\n faChrome,\n faFirefox,\n faYoutube,\n faEnvelope,\n faFileVideo,\n faGlobeAmericas,\n faGlobe,\n faWindowRestore,\n faColumns,\n faFileAlt,\n faPlayCircle,\n faCube,\n faBroadcastTower,\n faList,\n faCommentDots,\n faLayerGroup,\n faCog,\n faTerminal,\n faTools,\n faSitemap,\n faTimes,\n faCheck,\n);\ndom.watch();\n\n$(() => {\n $(\"#navbarSupportedContent\")\n .on(\"show.bs.collapse\", () => $(\".navbar\").addClass(\"expanded\"))\n .on(\"hide.bs.collapse\", () => $(\".navbar\").removeClass(\"expanded\"));\n\n if (document.getElementById(\"nightly-builds\")) {\n load_nightly();\n }\n\n if (document.body.classList.contains(\"download\")) {\n // if url contains #beta-downloads, show the section and scroll to it\n if (location.hash.includes(\"#beta-downloads\")) {\n $(\"#beta-downloads\").collapse(\"show\");\n const element = document.getElementById(\"beta-downloads\");\n if (element) {\n element.scrollIntoView({\n behavior: \"smooth\",\n block: \"start\",\n });\n }\n }\n }\n});\n\n// Nightly table\n\nfunction formatDate(str) {\n return new Date(str).toDateString();\n}\n\nasync function load_nightly() {\n const data = await fetch_artifacts();\n const commits = await fetch_commits();\n const tableBody = document.getElementById(\"table-body\");\n if (!tableBody) return;\n\n tableBody.innerHTML = \"\";\n\n let commit_dict = {};\n commits.forEach((commit) => {\n commit_dict[commit.sha] = {\n author: commit.commit.author.name,\n message: commit.commit.message,\n };\n });\n\n try {\n tableBody.append(\n ...(await Promise.all(\n data.artifacts\n .filter((item) => item.workflow_run.head_sha in commit_dict)\n .map(async (item) => {\n const tr = document.createElement(\"tr\");\n const sha = item.workflow_run.head_sha;\n const url = `https://github.com/iina/iina/actions/runs/${item.workflow_run.id}/artifacts/${item.id}`;\n const commit = commit_dict[sha];\n\n tr.innerHTML = `\n ${formatDate(item.created_at)}\n \n ${commit.message.split(\"\\n\")[0]}\n ${commit.author}\n ${sha.substring(\n 0,\n 8,\n )}\n Download on GitHub\n `;\n return tr;\n }),\n )),\n );\n } catch {\n tableBody.innerHTML = `
Error occurred when fetching data from GitHub. Please visit GitHub Actions directly.
`;\n }\n}\n\nasync function fetch_artifacts() {\n const res = await fetch(\n \"https://api.github.com/repos/iina/iina/actions/artifacts?per_page=100\",\n );\n return await res.json();\n}\n\nasync function fetch_commits(sha) {\n const res = await fetch(\n `https://api.github.com/repos/iina/iina/commits?per_page=100`,\n );\n return await res.json();\n}\n\nwindow.fetch_artifacts = fetch_artifacts;\n" }, { "path": "assets/stylesheets/_bootstrap.sass", "content": "@import \"~bootstrap/scss/_functions.scss\"\n@import \"variables\"\n@import \"~bootstrap/scss/bootstrap.scss\"\n" }, { "path": "assets/stylesheets/_download.sass", "content": "@import \"variables\"\n\n.downloads\n padding: 2rem 0\n .dl-card\n margin: 1rem 0\n padding: 2rem\n // border: 1px solid $gray-200\n border-radius: 4px\n background: $gray-100\n .stable-btn, .beta-btn\n padding: .375rem 2rem\n border-radius: 1.5rem\n .tables-container\n display: flex\n gap: 2rem\n flex-wrap: wrap\n align-items: flex-start\n\n .table-box\n flex: 1 1 45%\n min-width: 320px\n\n table\n width: 100%\n border-collapse: collapse\n\n th,\n td\n text-align: left\n padding: 0.2rem 0.3rem\n border-top: 1px solid #ddd\n\n th\n background-color: #f6f6f6\n font-weight: 600\n\n tr:nth-child(even)\n background-color: #fafafa\n" }, { "path": "assets/stylesheets/_features.sass", "content": ".nav\n padding: 1rem 0 1.5rem 0\n .nav-container\n h2\n margin: 1rem 0 0.5rem 0\n\n.features\n padding: 0 0 1rem 0\n .features-container\n margin-left: -2px\n margin-right: -2px\n display: flex\n align-items: stretch\n align-content: stretch\n flex-wrap: wrap\n .feature-block\n padding: 2px\n &.half\n flex-basis: 50%\n @media(max-width: 920px)\n flex-basis: 100%\n .feature-content p\n @media(min-width: 920px)\n margin: 0 5%\n &.full\n flex-basis: 100%\n .feature-content p\n padding: 0 2rem\n @media(min-width: 920px)\n margin: 0 10%\n .feature-img\n img\n max-width: 100%\n min-width: 100%\n .feature-content\n height: 100%\n background: #f4f4f4\n padding: 4rem\n transition: all 0.15s ease-in\n @media(max-width: 767px)\n padding: 3rem 1rem\n h4\n margin: 0 0 1.5rem 0\n text-align: center\n font-size: 1.5rem\n p\n text-align: center\n margin: 0\n line-height: 1.5\n .content.dark\n display: none\n &.dark\n background: #222\n color: #eee\n .content.dark\n display: block\n .content.light\n display: none\n .segment\n border-color: #999\n &.active\n background: #777\n &:hover\n background: #666\n &.mmode\n background: url('/media/feature-mmode-bg.png')\n background-size: auto 100%\n background-position: center\n color: #fff\n text-shadow: 0 0 4px #444\n h4\n margin-top: 400px\n .segment-control\n margin: 1rem auto\n text-align: center\n font-size: 0.75rem\n .segment\n display: inline-block\n padding: 0.35rem 0.75rem\n border: 1px solid #ccc\n cursor: pointer\n &:first-child\n border-radius: 3px 0 0 3px\n &:last-child\n border-radius: 0 3px 3px 0\n &:not(:last-child)\n border-right: 0\n &.active\n background: #ccc\n &:hover\n background: #ddd" }, { "path": "assets/stylesheets/_index.sass", "content": "@import \"./variables\"\n@import \"./utils\"\n\np\n line-height: 1.4\n\nsection\n overflow: hidden\n\n.title\n position: relative\n background: linear-gradient(to bottom, #fefefe, #eee)\n padding: 17rem 0 15rem 0\n +media-breakpoint-down(md)\n padding: 8rem 0 13rem 0\n +media-breakpoint-up(xl)\n padding: 18rem 0 16rem 0\n .modern\n color: #111\n +text-img-bg('/images/text-bg.png')\n .sample-image\n position: absolute\n top: -24%\n bottom: -42%\n +media-breakpoint-down(sm)\n display: none\n +media-breakpoint-up(md)\n left: 60%\n +media-breakpoint-up(lg)\n left: 45%\n +media-breakpoint-up(xl)\n left: 45%\n top: -20%\n bottom: -36%\n img\n height: 100%\n .small-headline\n +font-family-system\n font-size: 1rem\n font-weight: 500\n letter-spacing: .1rem\n color: #aaa\n padding-left: 0.15em\n .headline\n font-size: 4rem\n font-weight: normal\n letter-spacing: .1rem\n margin: 0\n .sub-headline\n font-size: 1.6rem\n margin: 1rem 0 0 0\n .requirement, .other-downloads\n font-size: 0.8rem\n margin: 1rem 0 0 0\n color: #777\n .other-downloads\n margin: 0.5rem 0 0 0\n .download\n margin: 4rem 0 1rem 0\n .dl-btn\n display: inline-block\n background: #111\n color: #eee\n font-weight: 500\n margin: 0.25rem 0\n padding: .75rem 1.5rem\n text-decoration: none\n border-radius: 2rem\n &:not(:last-child)\n margin-right: 1rem\n .light\n color: #999\n margin-left: 0.5rem\n font-size: 0.8em\n font-weight: normal\n\n$gradient0: linear-gradient(135deg, #A8E6CF 0%, #FFD3B6 100%)\n$gradient1: linear-gradient(36deg, #5CCEB3 0%, #6765D0 65%, #6E4D8A 100%)\n\n.highlight\n h2\n font-size: 3em\n font-weight: 500\n p\n line-height: 1.6\n\nsection\n position: relative\n .background\n +absolute(0)\n overflow: hidden\n +media-breakpoint-down(sm)\n svg\n height: 120%\n width: 120%\n\n.highlight-link\n text-decoration: none\n position: relative\n\n.highlight--macos\n color: #fff\n padding: 6rem 0\n background: linear-gradient(to right, #140A17 0%, #041e2a 50%, #140A17 100%)\n text-align: center\n .background\n +absolute(0)\n background-image: url(/images/index-bg.svg)\n background-repeat: repeat\n h2\n margin: 0.83rem 0\n p\n color: #ccc\n font-size: 1.2rem\n margin: 4rem 10% 6rem 10%\n +media-breakpoint-down(sm)\n margin: 4rem 4% 0 4%\n .highlight-features\n margin: 4rem 0 0 0\n +media-breakpoint-down(sm)\n margin: 2rem 0 0 0\n .item\n display: flex\n text-align: left\n padding: 2rem 0\n +media-breakpoint-down(md)\n display: block\n .decoration-line\n display: none\n &:not(.reversed) .left, &.reversed .right\n margin-bottom: 1.6rem\n +media-breakpoint-up(md)\n &.reversed\n flex-direction: row-reverse\n .left\n padding-right: 1rem\n .right\n padding-left: 1rem\n .decoration-line\n margin: 2rem 2px 1rem 2px\n width: 50px\n height: 3px\n background: rgba(255,255,255,0.75)\n &:not(.reversed) .left, &.reversed .right\n width: 35%\n +media-breakpoint-down(lg)\n width: 50%\n .item-name\n font-size: 2rem\n font-weight: bold\n margin-bottom: 1rem\n .item-img img\n max-width: 100%\n .more-features\n padding-top: 4rem\n h4\n margin-bottom: 4rem\n .features\n display: flex\n .left, .right\n width: 50%\n padding: 0 1rem\n font-size: 1.4rem\n font-weight: bold\n line-height: 2\n .left\n text-align: right\n .right\n text-align: left\n +media-breakpoint-down(xs)\n width: 100%\n text-align: center !important\n .bg-1\n +text-img-bg('/images/text-bg-1.png')\n .bg-2\n +text-img-bg('/images/text-bg-2.png')\n .bg-3\n +text-img-bg('/images/text-bg-3.png')\n .bg-4\n +text-img-bg('/images/text-bg-4.png')\n .bg-5\n +text-img-bg('/images/text-bg-5.png')\n .bg-6\n +text-img-bg('/images/text-bg-6.png')\n .bg-large-l\n +text-img-bg('/images/text-bg-large-l.png')\n background-position: right\n .bg-large-r\n +text-img-bg('/images/text-bg-large-r.png')\n background-position: left\n .highlight-link\n display: inline-block\n margin-top: 2rem\n padding: 0.5rem 2.5rem\n color: #000\n font-weight: 500\n letter-spacing: 0.05px\n border-radius: 2.25rem\n background: #fff\n .comming-soon\n font-size: 0.75rem\n font-weight: normal\n opacity: 0.5\n\n.highlight--playback\n text-align: left\n padding: 8rem 0\n background: linear-gradient(154deg, #042A84 0%, #2C98A5 69%, #B9AE9B 100%)\n color: $white\n .container\n position: relative\n p\n font-size: 1.2rem\n margin: 3rem 25% 3rem 0\n +media-breakpoint-down(sm)\n margin-right: 15%\n +media-breakpoint-down(xs)\n margin-right: 0\n .items\n display: flex\n text-align: center\n color: $gray-700\n .item\n width: 160px\n margin-right: 1rem\n background: $white\n border-radius: 6px\n box-shadow: 0 0 6px rgba(0,0,0,.3)\n padding: 1rem 1.2rem\n font-size: 90%\n .item-icon\n color: $gray-800\n padding: 0.5rem 0 1rem 0\n .item-text\n padding-top: 0.5rem\n border-top: 1px solid $gray-300\n a\n &, &:hover, &:active\n color: #fff\n\n.highlight--opensource\n text-align: right\n padding: 8rem 0\n background: linear-gradient(140deg, #FFEFEF 0%, #FFC084 100%)\n color: $gray-900\n p\n font-size: 1.2rem\n margin: 3rem 0 3rem 25%\n +media-breakpoint-down(sm)\n margin-left: 15%\n +media-breakpoint-down(xs)\n margin-left: 0\n .swift-bg\n position: absolute\n left: -10%\n opacity: 0.5\n top: 50%\n transform: translateY(-50%)\n .content\n position: relative\n .highlight-link\n display: inline-block\n margin: 2rem 0 0 0\n padding: .75rem 1.5rem\n color: $gray-900\n border: 1px solid $gray-900\n border-radius: 1.75rem\n\n.plugin-pr\n .plugin-pr-content\n display: flex\n align-content: flex-start\n align-items: center\n padding: 1rem 0\n h6\n margin: 0\n color: #e76000\n .plugin-pr-links\n margin-left: 2rem\n a\n color: $gray-700 !important\n" }, { "path": "assets/stylesheets/_plugin.sass", "content": "@import \"variables\"\n\n.cube\n position: absolute\n background: url('data:image/svg+xml,')\n opacity: 0.05\n &.lg\n width: 80px\n height: 80px\n &.md\n width: 40px\n height: 40px\n &.sm\n width: 20px\n height: 20px\n\n#overview\n padding: 4rem 0 0 0\n background: linear-gradient(180deg, $gray-300, #fff)\n position: relative\n .background\n transform: translateX(-20px)\n position: absolute\n width: 100%\n\n#demo\n padding: 4rem 0\n pre\n padding: 16px\n border-radius: 6px\n box-shadow: 0 0 10px rgba(0,0,0,.5)\n max-width: 600px\n margin: 2rem auto 1rem auto\n .description\n color: rgba(0,0,0,.6)\n font-size: 0.875rem\n text-align: center\n\n.modules\n display: flex\n flex-wrap: wrap\n margin: 2rem -1rem\n .module-wrapper\n padding: 1rem\n width: 33.333%\n .module-container\n height: 100%\n border: 1px solid $gray-300\n border-radius: 8px\n padding: 1.25rem\n box-shadow: 0 2px 5px rgba(0,0,0,.1)\n background: linear-gradient(150deg, #fff, $gray-100)\n .module-name\n font-size: 1.125rem\n font-weight: bold\n margin-bottom: 0.875rem\n color: $primary\n span\n color: #212529\n .module-desc\n color: rgba(0,0,0,.6)\n\n#resources\n padding: 0 0 4rem 0\n\n@include media-breakpoint-down(sm)\n .cube.h\n display: none\n .modules\n .module-wrapper\n padding: 0.5rem\n width: 50%\n\n@include media-breakpoint-down(xs)\n .modules\n .module-wrapper\n width: 100%\n" }, { "path": "assets/stylesheets/_utils.sass", "content": "=font-family-system\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"\n\n=clear-float\n &:before, &:after\n display: table\n content: ' '\n &:after\n clear: both\n\n=absolute($inset)\n position: absolute\n left: $inset\n right: $inset\n top: $inset\n bottom: $inset\n\n=text-img-bg($img)\n background-image: url($img)\n background-repeat: no-repeat\n background-clip: text\n background-position: left\n text-fill-color: transparent\n -webkit-background-clip: text\n -webkit-text-fill-color: transparent" }, { "path": "assets/stylesheets/_variables.scss", "content": "// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n\n//\n// Color system\n//\n\n$white: #fff;\n$gray-100: #f8f9fa;\n$gray-200: #e9ecef;\n$gray-300: #dee2e6;\n$gray-400: #ced4da;\n$gray-500: #adb5bd;\n$gray-600: #6c757d;\n$gray-700: #495057;\n$gray-800: #343a40;\n$gray-900: #212529;\n$black: #000;\n\n$grays: ();\n// stylelint-disable-next-line scss/dollar-variable-default\n$grays: map-merge(\n (\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n ),\n $grays\n);\n\n\n$blue: #0368d4;\n$indigo: #6610f2;\n$purple: #6f42c1;\n$pink: #e83e8c;\n$red: #dc3545;\n$orange: #fd7e14;\n$yellow: #ffc107;\n$green: #28a745;\n$teal: #20c997;\n$cyan: #17a2b8;\n\n$colors: ();\n// stylelint-disable-next-line scss/dollar-variable-default\n$colors: map-merge(\n (\n \"blue\": $blue,\n \"indigo\": $indigo,\n \"purple\": $purple,\n \"pink\": $pink,\n \"red\": $red,\n \"orange\": $orange,\n \"yellow\": $yellow,\n \"green\": $green,\n \"teal\": $teal,\n \"cyan\": $cyan,\n \"white\": $white,\n \"gray\": $gray-600,\n \"gray-dark\": $gray-800\n ),\n $colors\n);\n\n$primary: #037ae3;\n$secondary: $gray-600;\n$success: $green;\n$info: $cyan;\n$warning: $yellow;\n$danger: $red;\n$light: $gray-100;\n$dark: $gray-800;\n\n$theme-colors: ();\n// stylelint-disable-next-line scss/dollar-variable-default\n$theme-colors: map-merge(\n (\n \"primary\": $primary,\n \"secondary\": $secondary,\n \"success\": $success,\n \"info\": $info,\n \"warning\": $warning,\n \"danger\": $danger,\n \"light\": $light,\n \"dark\": $dark\n ),\n $theme-colors\n);\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval: 8%;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold: 150;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark: $gray-900;\n$yiq-text-light: $white;\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret: true;\n$enable-rounded: true;\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-transitions: true;\n$enable-hover-media-query: false; // Deprecated, no longer affects any compiled CSS\n$enable-grid-classes: true;\n$enable-print-styles: true;\n\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n$spacer: 1rem;\n$spacers: ();\n// stylelint-disable-next-line scss/dollar-variable-default\n$spacers: map-merge(\n (\n 0: 0,\n 1: ($spacer * .25),\n 2: ($spacer * .5),\n 3: $spacer,\n 4: ($spacer * 1.5),\n 5: ($spacer * 3)\n ),\n $spacers\n);\n\n// This variable affects the `.h-*` and `.w-*` classes.\n$sizes: ();\n// stylelint-disable-next-line scss/dollar-variable-default\n$sizes: map-merge(\n (\n 25: 25%,\n 50: 50%,\n 75: 75%,\n 100: 100%,\n auto: auto\n ),\n $sizes\n);\n\n// Body\n//\n// Settings for the `` element.\n\n$body-bg: $white;\n$body-color: $gray-900;\n\n// Links\n//\n// Style anchor elements.\n\n$link-color: theme-color(\"primary\");\n$link-decoration: none;\n$link-hover-color: darken($link-color, 15%);\n$link-hover-decoration: underline;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom: 1rem;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px\n);\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints);\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1140px\n);\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns: 12;\n$grid-gutter-width: 30px;\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n$line-height-lg: 1.5;\n$line-height-sm: 1.5;\n\n$border-width: 1px;\n$border-color: $gray-300;\n\n$border-radius: .25rem;\n$border-radius-lg: .3rem;\n$border-radius-sm: .2rem;\n\n$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);\n$box-shadow: 0 .5rem 1rem rgba($black, .15);\n$box-shadow-lg: 0 1rem 3rem rgba($black, .175);\n\n$component-active-color: $white;\n$component-active-bg: theme-color(\"primary\");\n\n$caret-width: .3em;\n\n$transition-base: all .2s ease-in-out;\n$transition-fade: opacity .15s linear;\n$transition-collapse: height .35s ease;\n\n\n// Fonts\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif: \"Rubik\", Helvetica, Arial, sans-serif;\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n$font-family-base: $font-family-sans-serif;\n// stylelint-enable value-keyword-case\n\n$font-size-base: 1rem; // Assumes the browser default, typically `16px`\n$font-size-lg: ($font-size-base * 1.25);\n$font-size-sm: ($font-size-base * .875);\n\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-bold: 700;\n\n$font-weight-base: $font-weight-normal;\n$line-height-base: 1.5;\n\n$h1-font-size: $font-size-base * 2.5;\n$h2-font-size: $font-size-base * 2;\n$h3-font-size: $font-size-base * 1.75;\n$h4-font-size: $font-size-base * 1.5;\n$h5-font-size: $font-size-base * 1.25;\n$h6-font-size: $font-size-base;\n\n$headings-margin-bottom: ($spacer / 2);\n$headings-font-family: inherit;\n$headings-font-weight: 500;\n$headings-line-height: 1.2;\n$headings-color: inherit;\n\n$display1-size: 6rem;\n$display2-size: 5.5rem;\n$display3-size: 4.5rem;\n$display4-size: 3.5rem;\n\n$display1-weight: 300;\n$display2-weight: 300;\n$display3-weight: 300;\n$display4-weight: 300;\n$display-line-height: $headings-line-height;\n\n$lead-font-size: ($font-size-base * 1.25);\n$lead-font-weight: 300;\n\n$small-font-size: 80%;\n\n$text-muted: $gray-600;\n\n$blockquote-small-color: $gray-600;\n$blockquote-font-size: ($font-size-base * 1.25);\n\n$hr-border-color: rgba($black, .1);\n$hr-border-width: $border-width;\n\n$mark-padding: .2em;\n\n$dt-font-weight: $font-weight-bold;\n\n$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25);\n$nested-kbd-font-weight: $font-weight-bold;\n\n$list-inline-padding: .5rem;\n\n$mark-bg: #fcf8e3;\n\n$hr-margin-y: $spacer;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-cell-padding: .75rem;\n$table-cell-padding-sm: .3rem;\n\n$table-bg: transparent;\n$table-accent-bg: rgba($black, .05);\n$table-hover-bg: rgba($black, .075);\n$table-active-bg: $table-hover-bg;\n\n$table-border-width: $border-width;\n$table-border-color: $gray-300;\n\n$table-head-bg: $gray-200;\n$table-head-color: $gray-700;\n\n$table-dark-bg: $gray-900;\n$table-dark-accent-bg: rgba($white, .05);\n$table-dark-hover-bg: rgba($white, .075);\n$table-dark-border-color: lighten($gray-900, 7.5%);\n$table-dark-color: $body-bg;\n\n$table-striped-order: odd;\n\n$table-caption-color: $text-muted;\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y: .375rem;\n$input-btn-padding-x: .75rem;\n$input-btn-line-height: $line-height-base;\n\n$input-btn-focus-width: .2rem;\n$input-btn-focus-color: rgba($component-active-bg, .25);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n$input-btn-padding-y-sm: .25rem;\n$input-btn-padding-x-sm: .5rem;\n$input-btn-line-height-sm: $line-height-sm;\n\n$input-btn-padding-y-lg: .5rem;\n$input-btn-padding-x-lg: 1rem;\n$input-btn-line-height-lg: $line-height-lg;\n\n$input-btn-border-width: $border-width;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n$btn-padding-y: $input-btn-padding-y;\n$btn-padding-x: $input-btn-padding-x;\n$btn-line-height: $input-btn-line-height;\n\n$btn-padding-y-sm: $input-btn-padding-y-sm;\n$btn-padding-x-sm: $input-btn-padding-x-sm;\n$btn-line-height-sm: $input-btn-line-height-sm;\n\n$btn-padding-y-lg: $input-btn-padding-y-lg;\n$btn-padding-x-lg: $input-btn-padding-x-lg;\n$btn-line-height-lg: $input-btn-line-height-lg;\n\n$btn-border-width: $input-btn-border-width;\n\n$btn-font-weight: $font-weight-normal;\n$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);\n$btn-focus-width: $input-btn-focus-width;\n$btn-focus-box-shadow: $input-btn-focus-box-shadow;\n$btn-disabled-opacity: .65;\n$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);\n\n$btn-link-disabled-color: $gray-600;\n\n$btn-block-spacing-y: .5rem;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius: $border-radius;\n$btn-border-radius-lg: $border-radius-lg;\n$btn-border-radius-sm: $border-radius-sm;\n\n$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;\n\n\n// Forms\n\n$label-margin-bottom: .5rem;\n\n$input-padding-y: $input-btn-padding-y;\n$input-padding-x: $input-btn-padding-x;\n$input-line-height: $input-btn-line-height;\n\n$input-padding-y-sm: $input-btn-padding-y-sm;\n$input-padding-x-sm: $input-btn-padding-x-sm;\n$input-line-height-sm: $input-btn-line-height-sm;\n\n$input-padding-y-lg: $input-btn-padding-y-lg;\n$input-padding-x-lg: $input-btn-padding-x-lg;\n$input-line-height-lg: $input-btn-line-height-lg;\n\n$input-bg: $white;\n$input-disabled-bg: $gray-200;\n\n$input-color: $gray-700;\n$input-border-color: $gray-400;\n$input-border-width: $input-btn-border-width;\n$input-box-shadow: inset 0 1px 1px rgba($black, .075);\n\n$input-border-radius: $border-radius;\n$input-border-radius-lg: $border-radius-lg;\n$input-border-radius-sm: $border-radius-sm;\n\n$input-focus-bg: $input-bg;\n$input-focus-border-color: lighten($component-active-bg, 25%);\n$input-focus-color: $input-color;\n$input-focus-width: $input-btn-focus-width;\n$input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n$input-placeholder-color: $gray-600;\n$input-plaintext-color: $body-color;\n\n$input-height-border: $input-border-width * 2;\n\n$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2);\n$input-height: calc(#{$input-height-inner} + #{$input-height-border});\n\n$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2);\n$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border});\n\n$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2);\n$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border});\n\n$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n\n$form-text-margin-top: .25rem;\n\n$form-check-input-gutter: 1.25rem;\n$form-check-input-margin-y: .3rem;\n$form-check-input-margin-x: .25rem;\n\n$form-check-inline-margin-x: .75rem;\n$form-check-inline-input-margin-x: .3125rem;\n\n$form-group-margin-bottom: 1rem;\n\n$input-group-addon-color: $input-color;\n$input-group-addon-bg: $gray-200;\n$input-group-addon-border-color: $input-border-color;\n\n$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n\n$custom-control-gutter: 1.5rem;\n$custom-control-spacer-x: 1rem;\n\n$custom-control-indicator-size: 1rem;\n$custom-control-indicator-bg: $gray-300;\n$custom-control-indicator-bg-size: 50% 50%;\n$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1);\n\n$custom-control-indicator-disabled-bg: $gray-200;\n$custom-control-label-disabled-color: $gray-600;\n\n$custom-control-indicator-checked-color: $component-active-color;\n$custom-control-indicator-checked-bg: $component-active-bg;\n$custom-control-indicator-checked-disabled-bg: rgba(theme-color(\"primary\"), .5);\n$custom-control-indicator-checked-box-shadow: none;\n\n$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow;\n\n$custom-control-indicator-active-color: $component-active-color;\n$custom-control-indicator-active-bg: lighten($component-active-bg, 35%);\n$custom-control-indicator-active-box-shadow: none;\n\n$custom-checkbox-indicator-border-radius: $border-radius;\n$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\");\n\n$custom-checkbox-indicator-indeterminate-bg: $component-active-bg;\n$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color;\n$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\");\n$custom-checkbox-indicator-indeterminate-box-shadow: none;\n\n$custom-radio-indicator-border-radius: 50%;\n$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\");\n\n$custom-select-padding-y: .375rem;\n$custom-select-padding-x: .75rem;\n$custom-select-height: $input-height;\n$custom-select-indicator-padding: 1rem; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-line-height: $input-btn-line-height;\n$custom-select-color: $input-color;\n$custom-select-disabled-color: $gray-600;\n$custom-select-bg: $input-bg;\n$custom-select-disabled-bg: $gray-200;\n$custom-select-bg-size: 8px 10px; // In pixels because image dimensions\n$custom-select-indicator-color: $gray-800;\n$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\");\n$custom-select-border-width: $input-btn-border-width;\n$custom-select-border-color: $input-border-color;\n$custom-select-border-radius: $border-radius;\n$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075);\n\n$custom-select-focus-border-color: $input-focus-border-color;\n$custom-select-focus-width: $input-btn-focus-width;\n$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5);\n\n$custom-select-font-size-sm: 75%;\n$custom-select-height-sm: $input-height-sm;\n\n$custom-select-font-size-lg: 125%;\n$custom-select-height-lg: $input-height-lg;\n\n$custom-range-track-width: 100%;\n$custom-range-track-height: .5rem;\n$custom-range-track-cursor: pointer;\n$custom-range-track-bg: $gray-300;\n$custom-range-track-border-radius: 1rem;\n$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1);\n\n$custom-range-thumb-width: 1rem;\n$custom-range-thumb-height: $custom-range-thumb-width;\n$custom-range-thumb-bg: $component-active-bg;\n$custom-range-thumb-border: 0;\n$custom-range-thumb-border-radius: 1rem;\n$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1);\n$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow;\n$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width; // For focus box shadow issue in IE/Edge\n$custom-range-thumb-active-bg: lighten($component-active-bg, 35%);\n\n$custom-file-height: $input-height;\n$custom-file-height-inner: $input-height-inner;\n$custom-file-focus-border-color: $input-focus-border-color;\n$custom-file-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-file-disabled-bg: $input-disabled-bg;\n\n$custom-file-padding-y: $input-btn-padding-y;\n$custom-file-padding-x: $input-btn-padding-x;\n$custom-file-line-height: $input-btn-line-height;\n$custom-file-color: $input-color;\n$custom-file-bg: $input-bg;\n$custom-file-border-width: $input-btn-border-width;\n$custom-file-border-color: $input-border-color;\n$custom-file-border-radius: $input-border-radius;\n$custom-file-box-shadow: $input-box-shadow;\n$custom-file-button-color: $custom-file-color;\n$custom-file-button-bg: $input-group-addon-bg;\n$custom-file-text: (\n en: \"Browse\"\n);\n\n\n// Form validation\n$form-feedback-margin-top: $form-text-margin-top;\n$form-feedback-font-size: $small-font-size;\n$form-feedback-valid-color: theme-color(\"success\");\n$form-feedback-invalid-color: theme-color(\"danger\");\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-min-width: 10rem;\n$dropdown-padding-y: .5rem;\n$dropdown-spacer: .125rem;\n$dropdown-bg: $white;\n$dropdown-border-color: rgba($black, .15);\n$dropdown-border-radius: $border-radius;\n$dropdown-border-width: $border-width;\n$dropdown-divider-bg: $gray-200;\n$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175);\n\n$dropdown-link-color: $gray-900;\n$dropdown-link-hover-color: darken($gray-900, 5%);\n$dropdown-link-hover-bg: $gray-100;\n\n$dropdown-link-active-color: $component-active-color;\n$dropdown-link-active-bg: $component-active-bg;\n\n$dropdown-link-disabled-color: $gray-600;\n\n$dropdown-item-padding-y: .25rem;\n$dropdown-item-padding-x: 1.5rem;\n\n$dropdown-header-color: $gray-600;\n\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown: 1000;\n$zindex-sticky: 1020;\n$zindex-fixed: 1030;\n$zindex-modal-backdrop: 1040;\n$zindex-modal: 1050;\n$zindex-popover: 1060;\n$zindex-tooltip: 1070;\n\n// Navs\n\n$nav-link-padding-y: .5rem;\n$nav-link-padding-x: 1rem;\n$nav-link-disabled-color: $gray-600;\n\n$nav-tabs-border-color: $gray-300;\n$nav-tabs-border-width: $border-width;\n$nav-tabs-border-radius: $border-radius;\n$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;\n$nav-tabs-link-active-color: $gray-700;\n$nav-tabs-link-active-bg: $body-bg;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;\n\n$nav-pills-border-radius: $border-radius;\n$nav-pills-link-active-color: $component-active-color;\n$nav-pills-link-active-bg: $component-active-bg;\n\n$nav-divider-color: $gray-200;\n$nav-divider-margin-y: ($spacer / 2);\n\n// Navbar\n\n$navbar-padding-y: ($spacer / 2);\n$navbar-padding-x: $spacer;\n\n$navbar-nav-link-padding-x: .5rem;\n\n$navbar-brand-font-size: $font-size-lg;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2);\n$navbar-brand-height: $navbar-brand-font-size * $line-height-base;\n$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2;\n\n$navbar-toggler-padding-y: .25rem;\n$navbar-toggler-padding-x: .75rem;\n$navbar-toggler-font-size: $font-size-lg;\n$navbar-toggler-border-radius: $btn-border-radius;\n\n$navbar-dark-color: rgba($white, .5);\n$navbar-dark-hover-color: rgba($white, .75);\n$navbar-dark-active-color: $white;\n$navbar-dark-disabled-color: rgba($white, .25);\n$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\");\n$navbar-dark-toggler-border-color: rgba($white, .1);\n\n$navbar-light-color: rgba($black, .5);\n$navbar-light-hover-color: rgba($black, .7);\n$navbar-light-active-color: rgba($black, .9);\n$navbar-light-disabled-color: rgba($black, .3);\n$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\");\n$navbar-light-toggler-border-color: rgba($black, .1);\n\n// Pagination\n\n$pagination-padding-y: .5rem;\n$pagination-padding-x: .75rem;\n$pagination-padding-y-sm: .25rem;\n$pagination-padding-x-sm: .5rem;\n$pagination-padding-y-lg: .75rem;\n$pagination-padding-x-lg: 1.5rem;\n$pagination-line-height: 1.25;\n\n$pagination-color: $link-color;\n$pagination-bg: $white;\n$pagination-border-width: $border-width;\n$pagination-border-color: $gray-300;\n\n$pagination-focus-box-shadow: $input-btn-focus-box-shadow;\n$pagination-focus-outline: 0;\n\n$pagination-hover-color: $link-hover-color;\n$pagination-hover-bg: $gray-200;\n$pagination-hover-border-color: $gray-300;\n\n$pagination-active-color: $component-active-color;\n$pagination-active-bg: $component-active-bg;\n$pagination-active-border-color: $pagination-active-bg;\n\n$pagination-disabled-color: $gray-600;\n$pagination-disabled-bg: $white;\n$pagination-disabled-border-color: $gray-300;\n\n\n// Jumbotron\n\n$jumbotron-padding: 2rem;\n$jumbotron-bg: $gray-200;\n\n\n// Cards\n\n$card-spacer-y: .75rem;\n$card-spacer-x: 1.25rem;\n$card-border-width: $border-width;\n$card-border-radius: $border-radius;\n$card-border-color: rgba($black, .125);\n$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});\n$card-cap-bg: rgba($black, .03);\n$card-bg: $white;\n\n$card-img-overlay-padding: 1.25rem;\n\n$card-group-margin: ($grid-gutter-width / 2);\n$card-deck-margin: $card-group-margin;\n\n$card-columns-count: 3;\n$card-columns-gap: 1.25rem;\n$card-columns-margin: $card-spacer-y;\n\n\n// Tooltips\n\n$tooltip-font-size: $font-size-sm;\n$tooltip-max-width: 200px;\n$tooltip-color: $white;\n$tooltip-bg: $black;\n$tooltip-border-radius: $border-radius;\n$tooltip-opacity: .9;\n$tooltip-padding-y: .25rem;\n$tooltip-padding-x: .5rem;\n$tooltip-margin: 0;\n\n$tooltip-arrow-width: .8rem;\n$tooltip-arrow-height: .4rem;\n$tooltip-arrow-color: $tooltip-bg;\n\n\n// Popovers\n\n$popover-font-size: $font-size-sm;\n$popover-bg: $white;\n$popover-max-width: 276px;\n$popover-border-width: $border-width;\n$popover-border-color: rgba($black, .2);\n$popover-border-radius: $border-radius-lg;\n$popover-box-shadow: 0 .25rem .5rem rgba($black, .2);\n\n$popover-header-bg: darken($popover-bg, 3%);\n$popover-header-color: $headings-color;\n$popover-header-padding-y: .5rem;\n$popover-header-padding-x: .75rem;\n\n$popover-body-color: $body-color;\n$popover-body-padding-y: $popover-header-padding-y;\n$popover-body-padding-x: $popover-header-padding-x;\n\n$popover-arrow-width: 1rem;\n$popover-arrow-height: .5rem;\n$popover-arrow-color: $popover-bg;\n\n$popover-arrow-outer-color: fade-in($popover-border-color, .05);\n\n\n// Badges\n\n$badge-font-size: 75%;\n$badge-font-weight: $font-weight-bold;\n$badge-padding-y: .25em;\n$badge-padding-x: .4em;\n$badge-border-radius: $border-radius;\n\n$badge-pill-padding-x: .6em;\n// Use a higher than normal value to ensure completely rounded edges when\n// customizing padding or font-size on labels.\n$badge-pill-border-radius: 10rem;\n\n\n// Modals\n\n// Padding applied to the modal body\n$modal-inner-padding: 1rem;\n\n$modal-dialog-margin: .5rem;\n$modal-dialog-margin-y-sm-up: 1.75rem;\n\n$modal-title-line-height: $line-height-base;\n\n$modal-content-bg: $white;\n$modal-content-border-color: rgba($black, .2);\n$modal-content-border-width: $border-width;\n$modal-content-border-radius: $border-radius-lg;\n$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5);\n$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5);\n\n$modal-backdrop-bg: $black;\n$modal-backdrop-opacity: .5;\n$modal-header-border-color: $gray-200;\n$modal-footer-border-color: $modal-header-border-color;\n$modal-header-border-width: $modal-content-border-width;\n$modal-footer-border-width: $modal-header-border-width;\n$modal-header-padding: 1rem;\n\n$modal-lg: 800px;\n$modal-md: 500px;\n$modal-sm: 300px;\n\n$modal-transition: transform .3s ease-out;\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n$alert-padding-y: .75rem;\n$alert-padding-x: 1.25rem;\n$alert-margin-bottom: 1rem;\n$alert-border-radius: $border-radius;\n$alert-link-font-weight: $font-weight-bold;\n$alert-border-width: $border-width;\n\n$alert-bg-level: -10;\n$alert-border-level: -9;\n$alert-color-level: 6;\n\n\n// Progress bars\n\n$progress-height: 1rem;\n$progress-font-size: ($font-size-base * .75);\n$progress-bg: $gray-200;\n$progress-border-radius: $border-radius;\n$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1);\n$progress-bar-color: $white;\n$progress-bar-bg: theme-color(\"primary\");\n$progress-bar-animation-timing: 1s linear infinite;\n$progress-bar-transition: width .6s ease;\n\n// List group\n\n$list-group-bg: $white;\n$list-group-border-color: rgba($black, .125);\n$list-group-border-width: $border-width;\n$list-group-border-radius: $border-radius;\n\n$list-group-item-padding-y: .75rem;\n$list-group-item-padding-x: 1.25rem;\n\n$list-group-hover-bg: $gray-100;\n$list-group-active-color: $component-active-color;\n$list-group-active-bg: $component-active-bg;\n$list-group-active-border-color: $list-group-active-bg;\n\n$list-group-disabled-color: $gray-600;\n$list-group-disabled-bg: $list-group-bg;\n\n$list-group-action-color: $gray-700;\n$list-group-action-hover-color: $list-group-action-color;\n\n$list-group-action-active-color: $body-color;\n$list-group-action-active-bg: $gray-200;\n\n\n// Image thumbnails\n\n$thumbnail-padding: .25rem;\n$thumbnail-bg: $body-bg;\n$thumbnail-border-width: $border-width;\n$thumbnail-border-color: $gray-300;\n$thumbnail-border-radius: $border-radius;\n$thumbnail-box-shadow: 0 1px 2px rgba($black, .075);\n\n\n// Figures\n\n$figure-caption-font-size: 90%;\n$figure-caption-color: $gray-600;\n\n\n// Breadcrumbs\n\n$breadcrumb-padding-y: .75rem;\n$breadcrumb-padding-x: 1rem;\n$breadcrumb-item-padding: .5rem;\n\n$breadcrumb-margin-bottom: 1rem;\n\n$breadcrumb-bg: $gray-200;\n$breadcrumb-divider-color: $gray-600;\n$breadcrumb-active-color: $gray-600;\n$breadcrumb-divider: quote(\"/\");\n\n$breadcrumb-border-radius: $border-radius;\n\n\n// Carousel\n\n$carousel-control-color: $white;\n$carousel-control-width: 15%;\n$carousel-control-opacity: .5;\n\n$carousel-indicator-width: 30px;\n$carousel-indicator-height: 3px;\n$carousel-indicator-spacer: 3px;\n$carousel-indicator-active-bg: $white;\n\n$carousel-caption-width: 70%;\n$carousel-caption-color: $white;\n\n$carousel-control-icon-width: 20px;\n\n$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\");\n$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\");\n\n$carousel-transition: transform .6s ease; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n\n// Close\n\n$close-font-size: $font-size-base * 1.5;\n$close-font-weight: $font-weight-bold;\n$close-color: $black;\n$close-text-shadow: 0 1px 0 $white;\n\n// Code\n\n$code-font-size: 87.5%;\n$code-color: $pink;\n\n$kbd-padding-y: .2rem;\n$kbd-padding-x: .4rem;\n$kbd-font-size: $code-font-size;\n$kbd-color: $white;\n$kbd-bg: $gray-900;\n\n$pre-color: $gray-900;\n$pre-scrollable-max-height: 340px;\n\n\n// Printing\n$print-page-size: a3;\n$print-body-min-width: map-get($grid-breakpoints, \"lg\");\n" }, { "path": "assets/stylesheets/highlights.sass", "content": "$main: #276ad8\n$main-light: #45a2ff\n\n@import \"utils\"\n\n\\:root\n color-scheme: light dark\n --bg-color: #fff\n --sub-title-color: rgba(0, 0, 0, .85)\n --sub-title-underline-color: #{transparentize($main, 0.6)}\n --text-color: rgba(0, 0, 0, .6)\n --separator-color: rgba(0, 0, 0,.1)\n --main-color: #{$main}\n --title-bg: url('/images/title-bg.jpeg')\n --item-bg: rgba(0, 0, 0, .04)\n\n@media (prefers-color-scheme: dark)\n \\:root\n --bg-color: #1e1e1e\n --sub-title-color: rgba(255, 255, 255,.9)\n --sub-title-underline-color: #{transparentize($main-light, 0.4)}\n --text-color: rgba(255, 255, 255, .7)\n --separator-color: rgba(255, 255, 255, .1)\n --main-color: #{$main-light}\n --title-bg: url('/images/title-bg-light.jpeg')\n --item-bg: rgba(255, 255, 255, .03)\n\nhtml\n font-family: -apple-system, BlinkMacSystemFont, sans-serif\n background: var(--bg-color)\n\nhtml[lang=zh-Hans]\n font-family: \"PingFang SC\", -apple-system, BlinkMacSystemFont, sans-serif\n\nbody\n font-size: 13px\n line-height: 1.4\n margin: 0\n padding: 0\n background: var(--bg-color)\n\n#main\n padding: 0 48px\n\n.page\n padding: 24px 0\n\nh1\n font-size: 32px\n margin: 12px 0\n +text-img-bg(\"/images/title-bg-light.jpeg\")\n background-image: var(--title-bg)\n\n.deco\n width: 100px\n height: 8px\n background: linear-gradient(45deg, $main, #7457e8)\n\n.highlights-container\n padding: 32px 0\n a\n color: var(--main-color)\n\n .highlight-item\n padding: 16px 24px\n background: var(--item-bg)\n border-radius: 8px\n\n &.image-right\n display: flex\n align-items: top\n .image\n padding-left: 16px\n .image-container\n width: 200px\n height: 120px\n border-radius: 6px\n border: 2px solid var(--main-color)\n box-shadow: 0 0 1px #000\n overflow: hidden\n img\n max-height: 100%\n &.image-bottom\n .image\n padding-top: 16px\n .image-container\n max-width: 80%\n margin: 0 auto\n img\n max-width: 100%\n max-height: 400px\n .content\n width: 100%\n flex: 1 1\n h4\n color: var(--sub-title-color)\n font-size: 20px\n margin: 0 0 12px 0\n span\n display: inline-block\n border-bottom: 2px solid var(--sub-title-underline-color)\n p\n font-size: 16px\n margin: 0\n color: var(--text-color)\n .separator\n width: 120px\n border-bottom: 1px solid var(--separator-color)\n margin: 24px auto\n\n.highlights-more\n input#expand\n display: none\n\n .release-note-link\n padding-left: 4px\n font-size: 16px\n color: var(--main-color)\n text-decoration: none\n cursor: pointer\n &:hover\n text-decoration: underline\n\n .release-note-container\n width: 100%\n margin-top: 16px\n max-height: 0\n overflow: hidden\n transition: max-height .25s ease-in-out\n background: var(--bg-color)\n border-radius: 8px\n border: 1px solid rgba(255, 255, 255, .2)\n iframe\n width: 100%\n width: calc(100% - 32px)\n border: 0\n padding: 16px\n\n #expand:checked + .release-note-link + .release-note-container\n max-height: 1000vh\n" }, { "path": "assets/stylesheets/index.sass", "content": "@import \"bootstrap\"\n\nhtml, body\n margin: 0\n padding: 0\n\nhtml\n +media-breakpoint-down(md)\n font-size: 15px\n +media-breakpoint-down(xs)\n font-size: 13px\n\nbody.index\n #main\n @import \"_index\"\nbody.features\n #main\n @import \"_features\"\nbody.download\n #main\n @import \"_download\"\nbody.plugin\n #header .navbar\n background: $gray-300\n border-bottom: 1px solid $gray-500\n #main\n @import \"_plugin\"\n\n.svg-inline--fa\n margin-right: 0.5rem\n\nbody.index\n #header\n position: absolute\n left: 0\n right: 0\n top: 0\n z-index: 1000\n .navbar\n background-color: transparentize($light, .3)\n backdrop-filter: blur(10px)\n +media-breakpoint-down(xs)\n #main\n .title\n padding-top: 11.875rem\n #header\n .navbar\n transition: all 0.3s ease-out !important\n box-shadow: 0 0 6px transparentize(#000, .75)\n &:not(.expanded)\n border: none\n background-color: transparent\n box-shadow: 0 0 6px transparent\n\n#header\n .navbar\n background-color: $light\n backdrop-filter: blur(10px)\n border-bottom: 1px solid $gray-300\n .navbar-brand\n span\n vertical-align: middle\n img\n width: 2rem\n .navbar-toggler\n border: none\n .nav-link\n padding-left: .75rem\n padding-right: .75rem\n &.stressed\n background: $gray-200\n border-radius: 2rem\n &:hover\n background: darken($gray-200, 5%)\n &.right\n border-radius: 0 2rem 2rem 0\n &.left\n border-radius: 2rem 0 0 2rem\n +media-breakpoint-down(xs)\n .navbar-brand\n padding: .5rem\n img\n width: 2.461538462rem\n .nav-item\n &:first-child\n margin-top: 0.75rem\n border-top: 1px solid $gray-300\n &:not(:last-child)\n border-bottom: 1px solid $gray-300\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)\n &:first-child\n border-top: 0.5px solid $gray-300\n &:not(:last-child)\n border-bottom: 0.5px solid $gray-300\n .nav-link\n line-height: 3\n &.stressed\n &.left, &.right\n background: none\n .svg-inline--fa\n display: none\n\nfooter\n background: $gray-900\n color: #bbb\n padding: 2rem 0\n font-size: 0.9rem\n a\n color: #efefef\n &:hover, &:active\n color: #fff\n .author\n padding: 2rem 0\n margin: 0\n hr\n border-color: $gray-800\n" }, { "path": "config.rb", "content": "# Activate and configure extensions\n# https://middlemanapp.com/advanced/configuration/#configuring-extensions\n\nrequire 'rouge'\nrequire 'rouge/plugins/redcarpet'\n\nclass HTMLWithHighlight < Redcarpet::Render::HTML\n include Rouge::Plugins::Redcarpet\nend\n\nset :markdown_engine, :redcarpet\nset :markdown, :fenced_code_blocks => true, :smartypants => true, :with_toc_data => true, :underline => true, :hard_wrap => true, highlight: true\nmd_opts = {\n renderer: HTMLWithHighlight.new,\n :fenced_code_blocks => true,\n :smartypants => true,\n :underline => true,\n :hard_wrap => true,\n highlight: true\n}\nSlim::Embedded.options[:markdown] = md_opts\nALT_MD_RENDERER = Redcarpet::Markdown.new(HTMLWithHighlight, md_opts)\n\nactivate :autoprefixer do |prefix|\n prefix.browsers = \"last 2 versions\"\nend\n\nactivate :directory_indexes\nactivate :i18n\n\n# Layouts\n# https://middlemanapp.com/basics/layouts/\n\n# Per-page layout changes\npage '/*.xml', layout: false\npage '/*.json', layout: false\npage '/*.txt', layout: false\n\n# With alternative layout\n# page '/path/to/file.html', layout: 'other_layout'\n\n# Proxy pages\n# https://middlemanapp.com/advanced/dynamic-pages/\n\nlocales = %i(zh-Hans)\n@app.data.highlights.each_key do |v|\n ver = v[1..]\n proxy \"/highlights/#{ver}/index.html\", \"/highlights-template.html\", locals: { version: ver }, locale: :en, ignore: true\n locales.each do |lang|\n proxy \"/#{lang}/highlights/#{ver}/index.html\", \"/highlights-template.html\", locals: { version: ver }, locale: lang, ignore: true\n end\nend\n\n# Helpers\n# Methods defined in the helpers block are available in templates\n# https://middlemanapp.com/basics/helper-methods/\n\nhelpers do\n def localized_path(path)\n return path unless path.start_with? '/'\n if I18n.locale == :en\n path\n else\n \"/#{I18n.locale}#{path}\"\n end\n end\n\n def download_link(definition)\n if definition.filename.nil?\n \"https://dl-portal.iina.io/IINA.v#{definition.version}.dmg\"\n else\n \"https://dl-portal.iina.io/#{definition.filename}\"\n end\n end\n\n def release_note_link(version)\n \"/release-note/#{version}.html\"\n end\n\n def plugin_doc?\n current_page.url.start_with? '/plugin/documentation/'\n end\n\n def doc_api_title(api)\n params = if api.params.nil?\n ''\n else\n api.params.keys.join(', ')\n end\n if (api.type || 'method') == 'method'\n \"#{api.name}(#{params})\"\n else\n api.name\n end\n end\n\n def doc_api_type(api)\n t = api.type || 'method'\n {\n 'method' => 'Method',\n 'prop' => 'Property',\n 'readonly' => 'Readonly Property',\n }[t]\n end\n\n def render_markdown(str)\n ALT_MD_RENDERER.render(str).html_safe\n end\nend\n\n# Build-specific configuration\n# https://middlemanapp.com/advanced/configuration/#environment-specific-settings\n\n# configure :build do\n# activate :minify_css\n# activate :minify_javascript\n# end\n\nactivate :external_pipeline,\n name: :webpack,\n command: build? ? 'npm run build' : 'npm run start',\n source: 'tmp/dist',\n latency: 1\n\nconfig[:js_dir] = 'assets/javascripts'\nconfig[:css_dir] = 'assets/stylesheets'\n" }, { "path": "data/highlights.yml", "content": "v1.1.0:\n - title: New Icons\n desc: We have updated the icons in the on-screen controller to provide a better user experience and match the upcoming macOS release.\n image: icons.png\n - title: Precise Time Display\n desc: Choose your desired time precision by right-clicking the time or duration label.\n image: time.png\n - title: Screenshot Previews\n desc: After taking a screenshot, now IINA will show you a preview with some quick actions.\n image: sc.png\n image_pos: bottom\n image_width: 885\n - title: Music Artists/Titles in the Playlist\n desc: Now IINA will show metadata for music files in the playlist. You can configure this option in Preferences > General > Playlist.\n image: pl.png\n image_pos: bottom\n image_width: 412\n - title: Force Dedicated GPU\n desc: This new option under Preferences > Video/Audio allows always using dedicated GPU for rendering to deliver better performance.\nv1.2.0:\n - title: Native Build for M1 Macs\n desc: Now IINA is shipped with a universal binary that run natively on both Intel and M1-based Macs.\nv1.3.0:\n - title: Built for the Latest OS and Hardware\n 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.\n image: macos2.png\n image_pos: bottom\n image_width: 200\n - title: HDR and EDR Support\n desc: You can now enjoy HDR videos on compatible displays. Switch HDR on/off conveniently in the sidebar.\n image: hdr.png\n image_pos: bottom\n image_width: 400\n - title: Broken features are working now\n desc: IINA 1.3.0 is a fresh build restoring all broken features, including legacy full screen and YouTube videos.\nv1.3.1:\n - title: Better HDR Support, More Bug Fixes\n desc: IINA 1.3.1 includes important fixes to bugs and crashes to make IINA more stable. IINA is also ready for macOS Ventura.\n - more: Deprecation Notice
\n Xcode 14 now only supports building for macOS 10.13 and above.\n We will work towards possible solutions,\n but please be aware that we may have to drop support for macOS 10.11 and 10.12 in future releases.\n IINA 1.3.1 might be the last version that supports macOS 10.12 Sierra.\n - more: GitHub Sponsors
\n We are testing the GitHub Sponsors program.\n Maintaining a free and open-source software costs us time and money.\n If you like IINA and would like to support us financially, please consider sponsoring us on GitHub.\n More ways to donate will be added in the future.\nv1.3.2:\n - title: Better HDR and Hardware Acceleration\n desc: IINA 1.3.2 also includes important fixes to bugs and crashes to make IINA more stable.\n - title: New File Icons and Log Viewer\n desc: IINA 1.3.2 includes new file icons for all supported file types.\n The new Log Viewer allows you to easily view and share logs, which is useful for troubleshooting,\n and provides a debugging tool for the upcoming plugin system.\n - more: The Plugin System
\n We have been working on a plugin system for IINA for over a year.\n The plugin system will bring infinite possibilities to IINA, allowing you to extend IINA with new features\n such as live comments, synchronized playback, online service integration, and more.\n We will release a beta version of the plugin system soon.\n - more: Deprecation Notice
\n IINA 1.3.2 only supports macOS 10.13 and above. We will release a separate version for macOS 10.11-10.12\n soon. Depending on our development progress, IINA 1.3.2 may be the last version to support macOS\n 10.11 and 10.12.\n - more: GitHub Sponsors
\n We are testing the GitHub Sponsors program.\n Maintaining a free and open-source software costs us time and money.\n If you like IINA and would like to support us financially, please consider sponsoring us on GitHub.\n More ways to donate will be added in the future.\nv1.3.3:\n - title: More Bug Fixes\n desc: IINA 1.3.3 includes important fixes to bugs and crashes to make IINA more stable.\n\nv1.3.4:\n - title: More Bug Fixes\n desc: IINA 1.3.4 uses the new OpenSubtitles API and includes important fixes to bugs and crashes to make IINA more stable.\n\nv1.3.5:\n - title: More Bug Fixes\n desc: IINA 1.3.5 contains important fixes and improvements to make IINA more stable.\n\nv1.4.0:\n - title: Plugin System\n desc:\n The plugin system allows you to extend IINA's functionality with JavaScript.\n You can control the playback, call the mpv API, access the network and file system, adding custom UI elements, and more.\n

\n The new Online Media plugin allows you to download online videos while playing them and switch between different video qualities on the fly.\n The new OpenSubtitles plugin provides a better experience for searching and downloading subtitles.\n

\n Learn more about the plugins and how to write your own at iina.io/plugins.\n - title: New Features\n desc:\n We have added numerous new options to make IINA more user-friendly, including secondary subtitle adjustments,\n WebP and JPEG-XL screenshots, Spatial Audio support via the AVFoundation driver, and more.\n - title: Bug Fixes and Improvements\n desc: IINA 1.4.0 includes a long list of bug fixes and improvements to make IINA more stable.\n\nv1.4.2:\n - title: Bug Fixes and Improvements\n desc: IINA 1.4.2 includes important fixes to bugs and crashes to make IINA more stable." }, { "path": "data/versions.yml", "content": "stable:\n - version: 1.4.2\n filename: IINA.v1.4.2-build164.dmg\n date: 2026-04-16\n sha256: 804e3368518f19039ebfbc3d698e1fabc9cd20f15fc4e42de635456cdf6a7f58\n system_x86: macOS 10.15\n system_arm: macOS 12.0\n - version: 1.4.1\n date: 2025-09-25\n sha256: 177ad469ea129bed95a82ac59b5fb58d0a06c35342fca7a37dba214a8821f848\n system_x86: macOS 10.15\n system_arm: macOS 12.0\n - version: 1.4.0\n date: 2025-09-14\n sha256: 4b9807c88d5d41caa635f0a408323ae3d80a3305476698ac2da4726136a481b8\n system_x86: macOS 10.15\n system_arm: macOS 12.0\n - version: 1.3.5\n date: 2024-05-31\n sha256: 3b8b9199f41a18c2aa8b30e5824d0c9daccc1d59176832ea650f533fcbdc6a38\n system_x86: macOS 10.13\n system_arm: macOS 11.0\n - version: 1.3.4\n date: 2023-12-31\n sha256: 7de50f5ad4a2fd5b27bf59a31b2060074c05331c7aafa533ad4adab65028d78c\n system_x86: macOS 10.13\n system_arm: macOS 11.0\n - version: 1.3.3\n date: 2023-07-20\n sha256: 4b3f6c4bed3bb77dbe29c12bf6d5d0959284afb01c7b59a35fd71a3a27088991\n system_x86: macOS 10.13\n system_arm: macOS 11.0\n - version: 1.3.2\n date: 2023-07-07\n sha256: ac5e72bf6407595514b327ffbbbf235919f80badbd18126007f8bc62768a1c19\n system_x86: macOS 10.13\n system_arm: macOS 11.0\n - version: 1.3.1\n date: 2022-11-06\n sha256: c646642a2884cb0516922170e0f6d4990b12b41d6244b08d53f318dbb9518c2f\n system_x86: OS X 10.11\n system_arm: macOS 11.0\n - version: 1.3.0\n date: 2022-05-30\n sha256: b50c416828005e1eec0dc8066c961efcc389e6be1a5a595541ea62d48d31a391\n system_x86: OS X 10.11\n system_arm: macOS 11.0\n - version: 1.2.0\n date: 2021-01-20\n sha256: 91b87e80055f097a1cb7a8c91979deb5303315f2067552cbe7387f48bfc42736\n system_x86: OS X 10.11\n system_arm: macOS 11.0\n - version: 1.1.2\n date: 2020-11-19\n sha256: 783ff165c73839c87cf9fd5f4418b87131063c3be77abc94dfca0585aa992b98\n system_x86: OS X 10.11\n - version: 1.1.1\n date: 2020-11-10\n sha256: ae9ac06459c2b9cd160592881c323d3fb3b50a9b70ba89c6f9f1e13df85c6881\n system_x86: OS X 10.11\n - version: 1.1.0\n date: 2020-10-13\n sha256: 44346b32137be39f74206181a370dac28ff0ae645d2c809f136f019b11863e27\n system_x86: OS X 10.11\n - version: 1.0.7\n date: 2020-06-12\n sha256: 1b1938b3a9640b4c26960aefab1ebe077bfaaf4b7a62ccfce5a7e138c9c56d75\n system_x86: OS X 10.11\n - version: 1.0.6\n date: 2020-01-13\n sha256: 51cce921ef52f00df9b474e230f33d5a947c5b6e4d33aac4213a0e07b4b4a246\n system_x86: OS X 10.11\n - version: 1.0.5\n date: 2020-01-06\n sha256: 04958c157ee3e71ae822e2ea471f6277b8f2b9b12bb3cc46fd769d9a4f30a05b\n system_x86: OS X 10.11\n - version: 1.0.4\n date: 2019-05-27\n sha256: e4e4c6ea67e149a4508beb739a2249e2fc8df99a324f738bdcf75b0d3514ea8e\n system_x86: OS X 10.11\n - version: 1.0.3\n date: 2019-03-31\n sha256: 571e4c4d7f93ea3911fbe0fbbf26150801d8abde28f25409a27aeebf404c82bd\n system_x86: OS X 10.11\n - version: 1.0.2\n date: 2019-02-23\n sha256: 37b1150073724f588487b6f61649ab73a34dd143dd5730d70d6ee64aa660056a\n system_x86: OS X 10.11\n - version: 1.0.1\n date: 2019-01-14\n sha256: d060069db88fe50e8184f6fba61e35dd6c06f8e043cf162f5fb88a4d036e1c23\n system_x86: OS X 10.11\n - version: 1.0.0\n date: 2018-12-25\n sha256: 1af6892fa41b95dd5c0d42be0cfb2dccd52522f716da0b8951a8e87f8e8d4f91\n system_x86: OS X 10.11\n - version: 0.0.15.1\n date: 2018-04-29\n sha256: 14ed0c7a301f2b5806c23d0e05e1006a82a23c41da9e3a0662f042bd39f15529\n system_x86: OS X 10.10\n - version: 0.0.15\n date: 2018-01-12\n sha256: 5492a131654eaaed1dd5992bde235467c573c994f4c3cd747f96aa7f26b2f33d\n system_x86: OS X 10.10\n - version: 0.0.14.1\n date: 2017-10-24\n sha256: 87d04d497e8a4cad7129877e41244248e795593dfbd0a1c8cee086142993c0f1\n system_x86: OS X 10.10\n - version: 0.0.14\n date: 2017-10-17\n sha256: 0b0de3238fde6cef6afd82993eb08ea6fa567c786f6fab67ab3346b2e2c7fc3b\n system_x86: OS X 10.10\n - version: 0.0.13\n date: 2017-10-15\n sha256: 7f7886555227fff45b05d3a48ff31c4e70a1c778695f829e747ad4af35342668\n system_x86: OS X 10.10\nbeta:\n - version: 1.4.0-beta1\n date: 2024-04-09\n sha256: 65a8b78468d17b6c60ee5fa284881dc799b1a6f62d32ed315a0933d43fed46a4\n system_x86: macOS 10.15\n system_arm: macOS 12.0\n - version: 1.1.0-beta2\n date: 2020-10-07\n sha256: 11f1f22c2b5fb8e6adc338d7122d37f44a1bb73a7d3a4fc3067d5651cfa2a833\n - version: 1.1.0-beta1\n date: 2020-09-02\n sha256: abafde4a187403721ad0bb2240a855b2e8c6d0d294ca8e8c3a896bee1e095587\n - version: 1.0.7-beta2\n date: 2020-04-13\n sha256: 562035b11d648126149ee9f47185ff4665c529c4acd138317d3f6535c31a14f0\n - version: 1.0.7-beta1\n date: 2020-03-01\n sha256: 53ff2ba27711e46c6e70c5b8cca9cdec2476db821eb39e18fb41dfd7be61d1ff\n - version: 1.0.0-rc\n date: 2018-12-02\n sha256: 40fb3442705e8ca1ab27c16e6dbdab9d41f926e4eeecb65c8f7829196b9cb863\n - version: 1.0.0-beta4\n date: 2018-09-10\n sha256: 1cf47942a3b89d0654034edcfc1c08ba57a76b4fc616c18944ba171e2e84a08b\n" }, { "path": "helpers/download_helper.rb", "content": "def filter(version_list, arch)\n supported = version_list.reject { |v| v.public_send(arch).to_s.empty? }\n result = []\n last_value = nil\n\n supported.each do |v|\n current_value = v.public_send(arch)\n next if current_value == last_value\n result << v\n last_value = current_value\n end\n\n result\nend\n" }, { "path": "locales/en.yml", "content": "---\nen:\n home: Home\n features: Features\n translation: Translation\n downloads: Downloads\n github: GitHub\n release_note: Release Note\n headline_1: The\n headline_2: modern\n headline_3: media player for macOS.\n download: Download\n plugins: Plugins\n requirement: Requires %{min_version_arm} for Apple Sillicon Macs, and %{min_version_x86} for Intel Macs\n download_beta: Download beta releases or nightly builds\n macos_header: For and only for modern macOS.\n 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.\n macos_dark_mode: Dark Mode\n 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.\n macos_pip: Picture-in-Picture\n macos_pip_desc: IINA supports the native Picture-in-Picture mode, enables you to enjoy either local or online videos without being distracted.\n more_features: More Features\n playback_header: Plays anything.\n highlights_title: Highlights in IINA v%{version}\n" }, { "path": "locales/zh-Hans.yml", "content": "---\nzh-Hans:\n home: 主页\n features: 功能\n downloads: 下载\n github: GitHub\n" }, { "path": "package.json", "content": "{\n \"name\": \"iina-website\",\n \"version\": \"1.0.0\",\n \"description\": \"The source code of IINA's website.\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"bootstrap\": \"^4.6.2\",\n \"dart-sass\": \"^1.25.0\",\n \"jquery\": \"^3.7.1\",\n \"popper.js\": \"^1.16.1\",\n \"sass\": \"^1.44.0\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.1.6\",\n \"@babel/preset-env\": \"^7.1.6\",\n \"@fortawesome/fontawesome-svg-core\": \"^6.5.2\",\n \"@fortawesome/free-brands-svg-icons\": \"^6.5.2\",\n \"@fortawesome/free-regular-svg-icons\": \"^6.5.2\",\n \"@fortawesome/free-solid-svg-icons\": \"^6.5.2\",\n \"autoprefixer\": \"^9.3.1\",\n \"babel-loader\": \"^8.0.4\",\n \"css-loader\": \"^5\",\n \"mini-css-extract-plugin\": \"^1\",\n \"postcss-loader\": \"^3.0.0\",\n \"precss\": \"^3.1.2\",\n \"sass-loader\": \"^10\",\n \"style-loader\": \"^0.23.1\",\n \"uglifyjs-webpack-plugin\": \"^2.0.1\",\n \"webpack\": \"^4.25.1\",\n \"webpack-cli\": \"^3.1.2\"\n },\n \"scripts\": {\n \"start\": \"webpack --mode=development --watch --progress --color\",\n \"build\": \"webpack --mode=production --bail -p\"\n }\n}\n" }, { "path": "source/_footer.slim", "content": "footer\n .container\n .contact.mb-2.d-flex.justify-content-between\n .left\n span\n = \"©2018-#{Date.today.year} iina.io\"\n .right\n span.fas.fa-envelope.mr-2\n span\n javascript:\n var addr = 'develo' + 'per'+ 's@ii' + 'na.io';\n document.write('' + addr + '');\n hr\n .source\n | You can find the source code of this website on \n = link_to 'GitHub', 'https://github.com/iina/iina-website'\n | .\n .contribute\n | If you are interested in translating this website to your language, please feel free to contact us.\n .attribution\n markdown:\n This website contains icons from [Font Awesome](https://fontawesome.com/) licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).\n" }, { "path": "source/_header.slim", "content": "- nav_items = [[:home, '/'], [:features, '/features'], [:download, '/download'], [:github, 'https://github.com/iina/iina', 'github']]\n\n#header\n nav.navbar.navbar-light.navbar-expand-sm\n = link_to '/', class: 'navbar-brand' do\n = image_tag \"iina-icon-60.png\", alt: \"Home\"\n span.ml-2 IINA\n - if plugin_doc?\n | Plugin Documentation\n button.navbar-toggler aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\" data-target=\"#navbarSupportedContent\" data-toggle=\"collapse\" type=\"button\"\n span.fas.fa-bars\n\n #navbarSupportedContent.collapse.navbar-collapse\n ul.navbar-nav.ml-auto\n /li.nav-item\n = link_to localized_path('/'), class: 'nav-link' do\n = t(:home)\n li.nav-item\n = link_to localized_path('/plugins'), class: 'nav-link' do\n span class=(\"fas fa-cube\")\n = t(:plugins)\n li.nav-item\n = link_to 'https://translate.iina.io', class: 'nav-link', target: '_blank' do\n span class=(\"fas fa-globe-americas\")\n = t(:translation)\n li.nav-item\n = link_to localized_path('/download'), class: 'nav-link stressed left' do\n span class=(\"fas fa-cloud-download-alt\")\n = t(:downloads)\n li.nav-item\n = link_to 'https://github.com/iina/iina', class: 'nav-link stressed right' do\n span class=(\"fab fa-github\")\n = t(:github)\n" }, { "path": "source/highlights-template.html.slim", "content": "---\nlayout: highlights\n---\n\n.deco\n.page\n h1 = I18n.t(:highlights_title, version: version)\n .highlights-container\n - items = data.highlights[\"v#{version}\"]\n - items.each_with_index do |h, i|\n - if h[:more]\n p == h[:more]\n - else\n - img_class = h[:image] ? (h[:image_pos] || 'right') : 'none'\n .highlight-item class=\"image-#{img_class}\"\n .content\n h4\n span = h[:title]\n p = h[:desc]\n - if h[:image]\n .image\n .image-container style=\"width:#{h[:image_width]}px\"\n = image_tag \"#{version}/#{h[:image]}\"\n - unless items.length == i + 1\n .separator\n .highlights-more\n = link_to release_note_link(version), class: 'release-note-link', target: '_blank' do\n | Full release notes >\n\n/ input#expand type=\"checkbox\"\n/ label.release-note-link for=\"expand\"\n/ | Full release notes\n/ .release-note-container\n/ iframe.rn-frame src=(release_note_link(version)) frameborder=\"0\" \n\n/ javascript:\n/ function fit() {\n/ var ifrm = document.querySelectorAll(\"iframe.rn-frame\")[0]\n/ if (!ifrm) {\n/ requestAnimationFrame(fit)\n/ return;\n/ }\n/ var win = ifrm.contentWindow\n/ var doc = win.document\n/ var html = doc.documentElement\n/ var body = doc.body\n\n/ if(body) {\n/ body.style.overflowY = \"hidden\"\n/ }\n/ if(html) {\n/ html.style.overflowY = \"hidden\"\n/ var style = win.getComputedStyle(html)\n/ ifrm.height = ifrm.parentNode.style.height = parseInt(style.getPropertyValue(\"height\"))\n \n/ }\n/ }\n\n/ window.addEventListener(\"load\", requestAnimationFrame.bind(this, fit))\n" }, { "path": "source/images/.keep", "content": "" }, { "path": "source/images/site.webmanifest", "content": "{\n \"name\": \"\",\n \"short_name\": \"\",\n \"icons\": [\n {\n \"src\": \"/images/android-chrome-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/images/android-chrome-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"theme_color\": \"#ffffff\",\n \"background_color\": \"#ffffff\",\n \"display\": \"standalone\"\n}\n" }, { "path": "source/layouts/highlights.slim", "content": "doctype html\nhtml\n head\n meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" /\n meta charset=\"utf-8\" /\n meta content=\"ie=edge\" http-equiv=\"x-ua-compatible\" /\n meta content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" name=\"viewport\" /\n title = current_page.data.title || \"IINA\"\n = stylesheet_link_tag \"highlights\"\n / assets\n body class=(current_page.data.html_class)\n #main\n = yield\n" }, { "path": "source/layouts/layout.slim", "content": "doctype html\nhtml\n head\n meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" /\n meta charset=\"utf-8\" /\n meta content=\"ie=edge\" http-equiv=\"x-ua-compatible\" /\n meta content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" name=\"viewport\" /\n title = current_page.data.title || \"IINA\"\n / favicons\n link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/images/apple-touch-icon.png\"\n link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/images/favicon-32x32.png\"\n link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/images/favicon-16x16.png\"\n link rel=\"manifest\" href=\"/images/site.webmanifest\"\n link rel=\"mask-icon\" href=\"/images/safari-pinned-tab.svg\" color=\"#5bbad5\"\n meta name=\"msapplication-TileColor\" content=\"#da532c\"\n meta name=\"theme-color\" content=\"#ffffff\"\n / assets\n link href=\"https://fonts.googleapis.com/css?family=Rubik:400,500,700&subset=latin-ext\" rel=\"stylesheet\"\n = stylesheet_link_tag \"site\"\n = javascript_include_tag \"site\"\n body class=(current_page.data.html_class)\n = partial \"header\"\n - if plugin_doc?\n #main\n #doc-index\n = partial 'plugin/documentation/plugin-doc-index'\n #doc-body\n = yield\n - else\n #main\n = yield\n = partial \"footer\"\n" }, { "path": "source/localizable/download.html.slim", "content": "---\ntitle: Download | IINA - The modern media player for macOS\nhtml_class: download\n---\n\nsection#downloads.downloads\n .container\n h2.mb-4 Downloads\n - latest = data.versions.stable.first\n - latest_beta = data.versions.beta.first\n .dl-card\n h5 Stable releases\n .text-center.py-2\n .text-muted.font-weight-bold.mb-2\n | Latest stable release\n = link_to download_link(latest), class: 'btn btn-primary stable-btn' do\n = latest.version\n .text-muted.small.mt-2\n | Released on \n = latest.date\n = link_to release_note_link(latest.version), class: 'release-note ml-2', target: '_blank' do\n = t(:release_note)\n .text-muted.small.mt-2\n = I18n.t(:requirement, min_version_arm: data.versions.stable.first.system_arm, min_version_x86: data.versions.stable.first.system_x86)\n .text-muted.small.mt-2.break-all\n | SHA256:\n = latest.sha256\n .small\n a href=\"#how-to-verify\" data-toggle=\"collapse\" How to verify the integrity of the downloaded file?\n #how-to-verify.collapse.pt-4\n p\n | Run the following command in Terminal and check if the output matches the SHA256 value above.\n br\n | You may need to replace the file path with the actual path of the downloaded file.\n pre.bg-light\n = \"shasum -a 256 ~/Downloads/IINA.v#{latest.version}.dmg\"\n hr.my-4\n .mb-2\n a href=\"#more-downloads\" data-toggle=\"collapse\" Previous versions\n #more-downloads.collapse\n .tables-container.text-muted.small\n .table-box\n h6.text-center For Apple Silicon Macs\n table\n thead\n tr\n th Version\n th Release Date\n th System Requirement\n th Release Notes\n tbody\n - filter(data.versions.stable, :system_arm).drop(1).each do |c|\n tr\n td = link_to c.version, download_link(c)\n td = c.date\n td = c.system_arm\n td = link_to 'Link', release_note_link(c.version)\n .table-box\n h6.text-center For Intel Macs\n table\n thead\n tr\n th Version\n th Release Date\n th System Requirement\n th Release Notes\n tbody\n - filter(data.versions.stable, :system_x86).drop(1).each do |c|\n tr\n td = link_to c.version, download_link(c)\n td = c.date\n td = c.system_x86\n td = link_to 'Link', release_note_link(c.version)\n a.small href=\"#full-list\" data-toggle=\"collapse\" Show full list\n #full-list.collapse\n .tables-container.text-muted.small\n table\n thead\n tr\n th Version\n th Release Date\n th System Requirement (arm)\n th System Requirement (x86)\n th Release Notes\n tbody\n - data.versions.stable.drop(1).each do |c|\n tr\n td = link_to c.version, download_link(c)\n td = c.date\n td = c.system_arm\n td = c.system_x86\n td = link_to 'Link', release_note_link(c.version)\n .dl-card\n h5 Beta releases\n p.text-muted\n | If you already have IINA installed, you can change to beta channel by\n checking the \"Receive beta updates\" button in Preferences.\n a href=\"#beta-downloads\" data-toggle=\"collapse\" Show downloads\n #beta-downloads.collapse\n .text-center.py-2\n .text-muted.font-weight-bold.mb-2\n | Latest beta release\n = link_to download_link(latest_beta), class: 'btn btn-secondary beta-btn', target: '_blank' do\n = latest_beta.version\n .text-muted.small.mt-2\n | Released on \n = latest_beta.date\n .text-muted.small.mt-2\n = I18n.t(:requirement, min_version_arm: data.versions.beta.first.system_arm, min_version_x86: data.versions.beta.first.system_x86)\n .text-muted.small.mt-2\n | SHA256:\n = latest_beta.sha256\n\n section#install-homebrew.mt-5\n .container\n h5 Install via Homebrew Cask\n p.text-muted\n | You may also install IINA via the community-maintained \n = link_to 'Homebrew', 'https://brew.sh/'\n |  cask by running:\n pre.bg-light.p-2.text-center\n | brew install --cask iina\n section#browser-extensions.mt-5\n .container\n h5 Browser extensions\n p.text-muted\n | You can open various online media in IINA directly from web browsers by using our browser extensions.\n p.text-muted\n | 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.\n .btn-group\n = link_to 'https://chrome.google.com/webstore/detail/open-in-iina/pdnojahnhpgmdhjdhgphgdcecehkbhfo', class: 'btn btn-secondary' do\n .span.fab.fa-chrome\n | Chrome\n = link_to 'https://addons.mozilla.org/addon/open-in-iina-x', class: 'btn btn-secondary' do\n .span.fab.fa-firefox\n | Firefox\n section#nightly-builds.mt-5\n .container\n h5 Nightly builds\n p.text-muted\n | 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.\n div\n = link_to 'Nightly Builds', '/nightly', class: 'btn btn-primary'\n" }, { "path": "source/localizable/features.html.slim", "content": "---\ntitle: Features | IINA - The modern media player for macOS\nhtml_class: features\n---\n\nsection.nav\n .container\n .nav-container\n h2 Features\n\nsection.features\n .container\n .features-container\n .feature-block.half\n .feature-content\n .feature-img\n = image_tag 'feature-sidebar.png', alt: 'Sidebar'\n h4 Access all you need from the sidebar.\n p All settings and options are available in the sidebar so you can adjust them in an intuitive way.\n .feature-block.half\n .feature-content\n .feature-img\n = image_tag 'feature-control.png', alt: 'Control'\n h4 Make full use of your mouse and trackpad.\n p IINA allows you to assign actions for mouse scrolling and click events, trackpad gestures or even Force Touch clicks.\n .feature-block.full\n .feature-content\n h4 Highly customizable user interface.\n p IINA provides 2 themes that match the system and 3 different layouts for the control bar.\n .segment-control.toggle-dark\n .segment.active data-choice=\"light\" Light + Top\n .segment data-choice=\"dark\" Dark + Floating\n .content.light\n .feature-img\n = image_tag 'feature-light.png', alt: 'Light + Top'\n .content.dark\n .feature-img\n = image_tag 'feature-dark.png', alt: 'Dark + Floating'\n .feature-block.half\n .feature-content\n .feature-img\n = image_tag 'feature-touchbar.png', alt: 'Touch Bar'\n h4 Touch Bar support.\n p Advanced Touch Bar support including a QuickTime-like seek preview.\n .feature-block.half\n .feature-content\n .feature-img\n = image_tag 'feature-pip.png', alt: 'Picture-in-Picture'\n h4 Picture-in-Picture.\n p IINA integrates the native Picture-in-Picture mode of macOS.\n .feature-block.half\n .feature-content\n .feature-img\n = image_tag 'feature-thumbnail.png', alt: 'Thumbnail preview'\n h4 Thumbnail preview.\n p IINA generates thumbnail for the whole timeline. You can preview at any time point just like YouTube.\n .feature-block.half\n .feature-content\n .feature-img\n = image_tag 'feature-crop.png', alt: 'Interactive Crop'\n h4 Interactive cropping and selection.\n 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.\n .feature-block.full\n .feature-content.mmode\n h4 Music mode.\n 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.\n .feature-block.half\n .feature-content\n h4 Superme decoding capability.\n p Powered by mpv, IINA delivers the best decoding performance on macOS.\n" }, { "path": "source/localizable/index.html.slim", "content": "---\ntitle: IINA - The modern media player for macOS\nhtml_class: index\n---\n\nsection.title\n .background\n svg width=\"100%\" height=\"100%\" viewBox=\"0 0 1200 800\"\n circle cx=100 cy=120 r=500 fill=\"#42b0ff\" fill-opacity=0.05\n circle cx=900 cy=620 r=140 fill=\"#ff4294\" fill-opacity=0.05\n circle cx=360 cy=840 r=360 fill=\"#ff9142\" fill-opacity=0.05\n circle cx=1000 cy=180 r=180 fill=\"#42ff91\" fill-opacity=0.05\n .container.position-relative\n .sample-image\n = image_tag \"sc-sky.png\", alt: \"Screenshot\"\n .small-headline = \"/ˈiːnə/\"\n h1.headline\n | IINA\n p.sub-headline\n = t(:headline_1)\n |  \n span.modern = t(:headline_2)\n |  \n = t(:headline_3)\n\n .plugin-pr\n .plugin-pr-content\n h6\n span.fas.fa-cube\n | Now with the plugin system\n .plugin-pr-links\n = link_to localized_path('/plugins'), class: 'pr-link' do\n span.fas.fa-angle-right\n | Learn more\n\n .download\n = link_to 'https://github.com/iina/iina', class: 'dl-btn github' do\n span.fab.fa-github\n |  GitHub\n span.light GPLv3\n / br\n - latest = data.versions.stable.first\n = link_to download_link(latest), class: 'dl-btn dmg' do\n span.fas.fa-cloud-download-alt\n |  \n = t(:download)\n span.light v#{latest.version}\n p.requirement\n = I18n.t(:requirement, min_version_arm: data.versions.stable.first.system_arm, min_version_x86: data.versions.stable.first.system_x86)\n p.other-downloads\n = link_to t(:download_beta), localized_path('/download')\n\n\n\nsection.highlight.highlight--macos\n .container\n h2 = t(:macos_header)\n p = t(:macos_desc)\n .highlight-features\n .item.item--forcetouch\n .left\n .decoration-line\n .item-name.bg-1 = t(:macos_dark_mode)\n .item-desc = t(:macos_dark_mode_desc)\n .right\n .item-img\n = image_tag \"feature-1.png\", width: 800\n .item.item--pip.reversed\n .right\n .decoration-line\n .item-name.bg-3 = t(:macos_pip)\n .item-desc = t(:macos_pip_desc)\n .left\n .item-img\n = image_tag \"feature-2.png\", width: 800\n .more-features\n h4 = t(:more_features)\n .features\n .left.bg-large-l\n | Touch Bar\n br\n | System Media Control\n br\n | Customizable UI\n br\n | Online Subtitles\n .right.bg-large-r\n | Music Mode\n br\n | Mouse & Trackpad Gestures\n br\n | Thumbnail Preview\n br\n | Plugin System\n = link_to'#', class: 'highlight-link' do\n div Screenshots\n .comming-soon Coming soon\n\nsection.highlight.highlight--playback\n .background\n svg width=\"100%\" height=\"100%\" viewBox=\"0 0 1200 800\"\n circle cx=150 cy=200 r=120 fill=\"#99e1d0\" fill-opacity=0.03\n circle cx=450 cy=700 r=180 fill=\"#99e1d0\" fill-opacity=0.03\n circle cx=1100 cy=80 r=500 fill=\"#42b0ff\" fill-opacity=0.05\n g transform=\"translate(1100,120)\"\n path d=\"M-150,220 L-150,-220 L300,0 z\" fill=\"#fff\" fill-opacity=0.03\n .container\n .content\n h2 = t(:playback_header)\n markdown:\n Powered by the open source media player mpv, IINA can play almost every media file you have.\n With the support of youtube-dl and our browser extensions, you can also play a variety of online streams in IINA via one click.\n .items.mb-4\n .item\n .item-icon\n span.fas.fa-file-video.fa-2x.m-0\n .item-text Local files\n .item\n .item-icon\n span.fas.fa-globe-americas.fa-2x.m-0\n .item-text Online streams\n .item\n .item-icon\n span.fab.fa-youtube.fa-2x.m-0\n .item-text YouTube playlists\n .content\n = link_to localized_path('/download#browser-extensions') do\n | Download browser extensions\n span.fas.fa-angle-right.ml-2\n\nsection.highlight.highlight--opensource\n .container\n .swift-bg\n = image_tag \"swift.svg\"\n .content\n h2 Free, open source, in active development.\n .row\n .col-sm\n p\n |\n Written in the Swift programming language, IINA is free and open-sourced under the GPLv3 license.\n Please feel free to contribute to it by opening an issue, sending a feature request or a bug report on GitHub or by email.\n = link_to 'https://github.com/iina/iina', class: 'highlight-link' do\n span.fab.fa-github\n span.mr-2 GitHub repository\n span.fa.fa-angle-right\n .col-sm\n p\n |\n IINA has been translated into more than 20 languages by translators from all over the world.\n You can improve the translation or add your new language freely via our translation platform\n small\n | (powered by Crowdin)\n | .\n = link_to 'https://translate.iina.io', class: 'highlight-link', target: '_blank' do\n span.fas.fa-globe\n span.mr-2 Translation platform\n span.fa.fa-angle-right\n\n/== render '/_contribution.*'\n" }, { "path": "source/localizable/nightly.html.slim", "content": "---\ntitle: Nightly Download | IINA - The modern media player for macOS\nhtml_class: download\n---\n\nsection#downloads.downloads\n section#nightly-builds\n .container\n h2 Nightly builds\n .alert.alert-info.mt-4.mb-4\n | Nightly builds are built by GitHub Actions based on each new commit on the develop branch. \n strong You may need to login on GitHub to download a nightly build. \n | They are not signed, so you need to manually change your system security settings to use nightly builds. \n p\n markdown:\n This page fetches the latest builds using GitHub API. You can visit\n [GitHub Actions](https://github.com/iina/iina/actions) for more information and builds.\n .nightly-builds-list\n table.table.small\n thead \n th Built at\n th Available\n th Commit Message\n th Author\n th SHA\n th Download\n tbody#table-body\n" }, { "path": "source/localizable/plugins/index.html.slim", "content": "---\ntitle: Plugin System | IINA - The modern media player for macOS\nhtml_class: plugin\n---\n\nsection#overview\n .background\n .cube.lg style=\"left: 0%; top: -40px;\"\n .cube.lg.h style=\"left: 20%; top: -40px;\"\n .cube.lg style=\"left: 40%; top: -40px;\"\n .cube.lg.h style=\"left: 60%; top: -40px;\"\n .cube.lg style=\"left: 80%; top: -40px;\"\n .cube.lg.h style=\"left: 100%; top: -40px;\"\n .cube.md.h style=\"left: 10%; top: 40px;\"\n .cube.md style=\"left: 30%; top: 40px;\"\n .cube.md.h style=\"left: 50%; top: 40px;\"\n .cube.md style=\"left: 70%; top: 40px;\"\n .cube.md.h style=\"left: 90%; top: 40px;\"\n .cube.sm.h style=\"left: 0%; top: 110px;\"\n .cube.sm style=\"left: 20%; top: 110px;\"\n .cube.sm.h style=\"left: 40%; top: 110px;\"\n .cube.sm style=\"left: 60%; top: 110px;\"\n .cube.sm.h style=\"left: 80%; top: 110px;\"\n .cube.sm style=\"left: 100%; top: 110px;\"\n .container\n h1 Plugin System\n .pt-4\n markdown:\n The plugin system allows you to extend IINA's functionality with JavaScript.\n You can control the playback, call the mpv API, access the network and file system,\n adding custom UI elements, and more. The plugin system is available in IINA 1.4.0.\n\nsection#demo\n .container\n h4 Concise API, powerful features\n .pt-4\n markdown:\n With several lines of code, you can implement the exact feature tailored to your needs.\n Furthermore, with the Official _User Scripts_ plugin, you can just copy-and-paste code snippets into IINA without writing plugin packages.\n .row\n .col\n pre style=\"font-family:monospace;color: rgb(201, 209, 217); background-color: rgb(13, 17, 23); font-weight: 400; \"\n const { core, event, overlay } = iina;\n
event.on(\"iina.file-loaded\", () => {\n
overlay.simpleMode();\n
overlay.setContent(`<p>${core.status.title}</p>`);\n
overlay.setStyle(`p { font-size: 48px; }`);\n
overlay.show();\n
})\n .description\n | Display the video title in a large font on the top of the video\n .col\n pre style=\"font-family:monospace;color: rgb(201, 209, 217); background-color: rgb(13, 17, 23); font-weight: 400; \"\n const { core, event } = iina;\n
event.on(\"mpv.pause.changed\", () => {\n
core.window.miniaturized = core.status.paused;\n
});\n
event.on(\"iina.window-deminiaturized\", () => {\n
core.resume();\n
});\n .description\n | Minimize the window when the video is paused, and resume when restored\n\nsection#modules\n .container\n h4 What you can do with the plugin system\n .modules\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-cube\n span Core\n .module-desc\n | Control the playback and get/set various status from the window frame to subtitle tracks.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-play-circle\n span MPV\n .module-desc\n | Access the mpv API with properties and hooks for advanced playback control.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-broadcast-tower\n span Event\n .module-desc\n | Register and remove listeners for IINA and mpv events.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-globe\n span HTTP\n .module-desc\n | Make HTTP and XMLRPC requests.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-list\n span Playlist\n .module-desc\n | Control the playlist and add custom playlist context menu items.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-comment-dots\n span Subtitle\n .module-desc\n | Register custom subtitle downloaders that integrates with IINA's user interface.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-bars\n span Menu\n .module-desc\n | Add menu items with keyboard shortcuts under the Plugin menu.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-layer-group\n span Overlay\n .module-desc\n | Render custom webview-based content on the top of videos.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-columns\n span Sidebar View\n .module-desc\n | Add a tab in the sidebar with custom webview-based contents.\n .module-wrapper\n .module-container\n .module-name\n .far.fa-fw.fa-window-restore\n span Standalone Window\n .module-desc\n | Display a webview-based standalone window for complicated user interface.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-sitemap\n span Global Controller\n .module-desc\n | Spawn and control multiple player instances.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-file-alt\n span File\n .module-desc\n | Access the user file system or read/write sandboxed temporary files and data files.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-cog\n span Preferences\n .module-desc\n | Store preferences and display a settings page in IINA's preferences panel.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-tools\n span Utils\n .module-desc\n | Display system dialogs and run custom executables.\n .module-wrapper\n .module-container\n .module-name\n .fas.fa-fw.fa-terminal\n span Console\n .module-desc\n | Print logs for debugging, viewable from IINA's log viewer.\n\nsection#resources\n .container\n h4 Start building your plugin\n .my-4\n markdown:\n An `iina-plugin` command line tool is included with the IINA installation to help you create, build, and run plugins.\n We have also prepared a complete documentation with tutorials and API references.\n a.btn.btn-primary href='https://docs.iina.io/index.html' target='_blank'\n | Read the documentation\n .small at docs.iina.io\n .my-4\n markdown:\n You may also find these resources helpful:\n\n - [Official User Scripts plugin](https://github.com/iina/iina-plugin-userscript):\n simply enter `iina/iina-plugin-userscript` when installing.\n - [TypeScript definitions](https://github.com/iina/iina-plugin-definition):\n TypeScript definitions for the plugin API. It is included automatically when you create a new plugin with the `iina-plugin` command line tool." }, { "path": "webpack.config.js", "content": "const path = require(\"path\");\nconst webpack = require(\"webpack\");\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\nconst UglifyJsPlugin = require(\"uglifyjs-webpack-plugin\");\n\nconst cssLoaders = [\n {\n loader: MiniCssExtractPlugin.loader,\n },\n {\n loader: \"css-loader?url=false\", // translates CSS into CommonJS modules\n },\n {\n loader: \"postcss-loader\", // Run post css actions\n options: {\n plugins: function () {\n // post css plugins, can be exported to postcss.config.js\n return [require(\"precss\"), require(\"autoprefixer\")];\n },\n },\n },\n];\n\nmodule.exports = {\n entry: {\n site: [\"./assets/javascripts/index.js\", \"./assets/stylesheets/index.sass\"],\n highlights: [\"./assets/stylesheets/highlights.sass\"],\n },\n output: {\n filename: \"assets/javascripts/[name].js\",\n path: path.resolve(__dirname, \"tmp/dist\"),\n },\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: cssLoaders,\n },\n {\n test: /\\.s(a|c)ss$/,\n use: [\n ...cssLoaders,\n {\n loader: \"sass-loader\", // compiles Sass to CSS\n },\n ],\n },\n {\n test: /\\.m?js$/,\n exclude: /(node_modules|bower_components)/,\n use: {\n loader: \"babel-loader\",\n options: {\n presets: [\"@babel/preset-env\"],\n },\n },\n },\n ],\n },\n plugins: [new MiniCssExtractPlugin()],\n optimization: {\n minimizer: [new UglifyJsPlugin()],\n },\n};\n" } ]