ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Font size fix for examples, tidied up variables

Browse Source
This commit is contained in:
Sam Potts
2015-02-19 12:21:37 +11:00
parent 18001e7799
commit d46d40fa17
5 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/less/docs.less
View File

@ -30,12 +30,12 @@
// Base
html {
font-size: 62.5%;
//font-size: 62.5%;
}
body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fff;
.font-size(16);
//.font-size(16);
line-height: 1.5;
text-align: center;
color: #6D797F;

5
assets/less/docs/mixins.less
View File

@ -22,10 +22,11 @@
}
// Use rems for font sizing
// Leave <body> at 100%/16px
// ---------------------------------------
.font-size(@font-size: 16){
@rem: (@font-size / 10);
font-size: @font-size * 1px;
@rem: round((@font-size / 16), 1);
font-size: (@font-size * 1px);
font-size: ~"@{rem}rem";
}

29
assets/less/plyr.less
View File

@ -23,11 +23,16 @@
// Range
@range-track-height: 6px;
@range-track-bg: @gray;
@range-thumb-height: (@range-track-height * 2);
@range-thumb-width: (@range-track-height * 2);
@range-thumb-bg: @control-color;
@range-thumb-bg-focus: @control-color-active;
// Breakpoints
@bp-control-split: 560px; // When controls split into left/right
@bg-captions-large: 768px; // When captions jump to the larger font size
// Utility classes & mixins
// -------------------------------
// Screen reader only
@ -67,7 +72,7 @@
}
.range-track() {
height: @range-track-height;
background: @gray;
background: @range-track-bg;
border: 0;
border-radius: (@range-track-height / 2);
}
@ -132,7 +137,7 @@
text-align: center;
.font-smoothing();
@media (min-width: 560px) {
@media (min-width: @bg-captions-large) {
font-size: 24px;
}
}
@ -155,7 +160,7 @@
display: block;
margin: @control-spacing auto 0;
}
@media (min-width: 560px) {
@media (min-width: @bp-control-split) {
&-playback {
float: left;
}
@ -198,17 +203,17 @@
background: transparent;
overflow: hidden;
}
button:hover,
label:hover {
background: @control-color-active;
input:focus + label,
button:focus {
.tab-focus();
svg {
fill: #fff;
}
}
input:focus + label,
button:focus {
.tab-focus();
button:hover,
input + label:hover {
background: @control-color-active;
svg {
fill: #fff;
@ -365,15 +370,13 @@
top: auto;
bottom: 90px;
@media (min-width: 560px) and (max-width: 767px) {
@media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) {
bottom: 60px;
}
@media (min-width: 768px) {
@media (min-width: @bg-captions-large) {
bottom: 80px;
}
}
}
.player-controls {
position: absolute;