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