src/less/app.less
@font-face {
font-family: 'OpenSans';
src: url('../font/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('../font/OpenSans-Semibold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('../font/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'OpenSansCondensed';
src: url('../font/OpenSans-CondLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansCondensed';
src: url('../font/OpenSans-CondBold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'OpenSansCondensed';
src: url('../font/OpenSans-CondLightItalic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
body {
font-family: "OpenSans";
font-weight: normal;
font-style: normal;
background: #333;
color: #eee;
overflow: hidden;
margin: 24px;
font-size: 18pt;
}
h1, h2, h3 {
color: lightgray;
font-family: "OpenSansCondensed";
font-weight: normal;
}
h1 {
font-size: 32pt;
margin-top: 0em;
padding-bottom: 10px;
border-bottom: 1px solid gray;
}
h2 {
margin-bottom: 0em;
padding-bottom: 10px;
font-size: 26pt;
}
a {
color: #eee;
text-decoration: none;
font-weight: bold;
}
#video-container {
position: absolute;
}
#canvas-container {
z-index: -1;
}
.osd {
position: absolute;
bottom: 24px;
margin: 0 auto 0 auto;
width:600px;
height:31px;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
font-weight: bold;
font-size: 28px;
}
#osd-settings {
top: 24px;
font-size:21px;
}
#footer {
color: gray;
font-size: 10pt;
padding-top: 10px;
border-top: 1px solid gray;
position: absolute;
bottom: 1em;
width: 100%;
a {
color: gray;
text-decoration: none;
font-weight: normal;
}
a:hover {
text-decoration: underline;
}
}
.tool {
display: inline-block;
text-align: center;
padding: 1em;
width: 150px;
}
.tool a {
color: white;
font-size: 10pt;
}